/* The design language, set on Home first, and on the rail that frames every
   screen. Loaded last. Other screens move onto it one at a time.

   1. One thing leads. A screen has one figure that matters most; it gets the
      one bold surface (indigo) and the one large size. Everything else is quiet.
   2. Six sizes of type and no others: 40 the leading figure, 28 the title,
      22 a figure, 15 a heading, 14 everything read, 12.5 everything beside it.
   3. Space in steps of four: 4, 8, 12, 16, 24, 32. Cards are 24 inside on a
      wide screen and 16 on a phone, 16 apart, and sit 16 from a phone's edge.
      Corners: 16 a card, 8 a control or a row, 4 or less a mark.
   4. Colour says something or is not used. Indigo is the frame and the lead.
      Marigold is the one action and "now". Green is money in or done, amber
      is waiting, red is wrong or overdue. Nothing is tinted to decorate.
   5. No boxes of colour beside a row. A row is told by its icon and its words.
   6. Motion shows where something came from, once, and is over in under a
      second. It moves only opacity and transform, and stops for anyone who
      has asked their device for less of it. */

:root {
  --indigo: #1b1d5c; --indigo-bar: #5d64d6;
  --on-indigo: #ffffff; --on-indigo-dim: rgba(255, 255, 255, 0.68); --on-indigo-line: rgba(255, 255, 255, 0.13);
  --ok-ink: #177a4b;
  --t-lead: 40px; --t-title: 28px; --t-fig: 22px; --t-head: 15px; --t-body: 14px; --t-small: 12.5px;
  --r-lg: 16px;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}
/* the Tally mark on its own, with no words and no box: beside a group in the rail and in the menus */
.scope.mark-only, .side .scope.mark-only { height: auto; padding: 0; background: none; box-shadow: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the rail: indigo, with marigold for the one action and the place in hand ---------- */
@media (min-width: 1000px) {
  .side { background: var(--indigo); --on-dark-dim: var(--on-indigo-dim); --ink-2: rgba(255, 255, 255, 0.07); }
  .side :focus-visible { outline-color: #fff; }
  /* the same sizes of type as the page beside it */
  .side .logo { font-size: var(--t-head); }
  .rail-co-t b, .rail-search, .side-new, .rail-item, .rail-back, .rail-sub a, .side-status b { font-size: var(--t-body); }
  .rail-co-t small, .rail-search kbd, .rail-group, .rail-soon, .rail-item .count, .rail-sub .sub-n, .side .scope, .side-status span, .side .rail-av, .rail-me .rail-av.sm { font-size: var(--t-small); }
  .side .scope { height: 20px; border-radius: 4px; }
  .rail-search kbd { border-radius: 4px; }
  .rail-co, .side-status { border-radius: var(--r-ctl); }
  .rail-me .rail-av.sm { width: 24px; height: 24px; }
  .side .logo svg { transition: transform 700ms var(--spring); }
  .side .logo:hover svg { transform: rotate(72deg); }
  .rail-co { min-height: 44px; background: rgba(255, 255, 255, 0.08); transition: background-color 150ms; }
  /* (one company: its name alone, with no line under it) */
  .rail-co-t small:empty { display: none; }
  .rail-co:hover { background: rgba(255, 255, 255, 0.13); }
  .rail-search { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: box-shadow 150ms, color 150ms; }
  .rail-search:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
  .side-new { transition: transform 200ms var(--spring), filter 150ms; }
  .side-new:active { transform: scale(0.98); }
  .rail-group { color: rgba(255, 255, 255, 0.56); }
  .rail-item, .rail-back { color: rgba(255, 255, 255, 0.82); transition: background-color 150ms, color 150ms; }
  .rail-item svg { color: rgba(255, 255, 255, 0.58); transition: color 150ms; }
  .rail-item:hover svg { color: #fff; }
  .rail-item:hover, .rail-back:hover, .rail-sub a:hover { background: rgba(255, 255, 255, 0.08); }
  .rail-item[aria-current="page"], .rail-sub a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); }
  .rail-item[aria-current] svg, .rail-item[aria-current]:hover svg { color: var(--accent); }
  .rail-soon { color: rgba(255, 255, 255, 0.56); }
  .side .scope-local { color: rgba(255, 255, 255, 0.6); }
  .side-status button.ss-check { background: rgba(255, 255, 255, 0.1); transition: background-color 150ms; }
  .side-status button.ss-check:hover { background: rgba(255, 255, 255, 0.18); }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .side .logo svg { animation: h-bloom 700ms var(--spring) both; }
}
@keyframes h-bloom { from { opacity: 0; transform: rotate(-90deg) scale(0.5); } }

/* ---------- Home: the frame of the page ---------- */
.home3 { display: grid; gap: 24px; max-width: 1360px; margin: 0 auto; font-size: var(--t-body); }
.home3 kbd { height: 20px; min-width: 24px; font-size: var(--t-small); color: var(--muted); background: var(--paper); box-shadow: none; border-radius: 4px; }
.h-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.h-title { font-size: var(--t-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.h-sub { margin-top: 4px; font-size: var(--t-body); color: var(--muted); }
.h-create { display: grid; gap: 8px; min-width: 0; }
.h-make { display: flex; flex-wrap: wrap; gap: 8px; }
.h-make a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-ctl); font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(22, 23, 26, 0.04); transition: transform 200ms var(--spring), box-shadow 200ms; }
.h-make a:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.2), 0 6px 14px rgba(22, 23, 26, 0.08); }
.h-make a:active { transform: scale(0.98); }
.h-make svg { flex: none; color: var(--muted); }
/* what is made here goes into Tally: said in words, with Tally's own mark */
.h-tally { display: flex; align-items: center; gap: 4px; font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.h-tally .tg { flex: none; color: var(--tally); }

/* ---------- a card, its heading and its rows ---------- */
.h-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(22, 23, 26, 0.04); }
.h-head { display: flex; align-items: center; min-height: 24px; margin-bottom: 8px; }
.h-head h2 { display: flex; align-items: center; gap: 8px; font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.h-head h2 span { font-weight: 500; color: var(--muted); }
.h-go { position: relative; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; }
.h-go .chev { color: currentColor; opacity: 0.45; transition: transform 200ms var(--spring), opacity 150ms; }
.h-go:hover .chev { opacity: 1; transform: translateX(3px); }
.h-rows { display: grid; margin: 0 -12px -12px; }
.h-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--r-ctl); transition: background-color 150ms; }
button.h-row { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; color: var(--muted); }
.h-row:hover { background: rgba(22, 23, 26, 0.04); }
.h-row > svg:first-child { flex: none; color: var(--muted); }
.h-row.tone-bad > svg:first-child { color: var(--bad); }
.h-row.tone-due > svg:first-child { color: var(--wait); }
.h-row .t { flex: 1; min-width: 0; display: grid; }
.h-row b { font-size: var(--t-body); font-weight: 500; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* what needs attention is read in full, on two lines at most */
.h-row.wrap b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.h-row small { font-size: var(--t-small); line-height: 1.45; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row .v { flex: none; display: grid; justify-items: end; font-weight: 500; line-height: 1.45; }
.h-row .v.in { color: var(--ok-ink); }
.h-pos small .bad { color: var(--bad); font-weight: 500; font-style: normal; }
.h-row > .chev { opacity: 0.4; transition: transform 200ms var(--spring), opacity 150ms; }
.h-row:hover > .chev { opacity: 1; transform: translateX(2px); }
.h-none { padding: 4px 0 8px; font-size: var(--t-body); color: var(--muted); }
/* nothing to do: said once, in the middle of its card, with a tick that draws itself */
.h-card:has(> .h-clear) { display: grid; grid-template-rows: auto 1fr; }
.h-clear { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 24px 8px; text-align: center; }
.h-clear svg { margin-bottom: 8px; color: var(--ok); }
.h-clear b { font-size: var(--t-head); font-weight: 600; }
.h-clear small { max-width: 34ch; font-size: var(--t-small); color: var(--muted); text-wrap: pretty; }

/* ---------- the lead: sales, on the one bold surface ---------- */
.h-lead { display: grid; gap: 16px; }
#homeSales, #homeMoney { display: grid; min-width: 0; }
.h-lead .empty-period { margin: 0; border-radius: var(--r-lg); align-content: center; }
.home3 .empty-period .ico { width: auto; height: auto; background: none; color: var(--muted); }
.home3 .empty-period .ico svg { width: 28px; height: 28px; }
.home3 .empty-period b { font-size: var(--t-head); }
.home3 .empty-period p { font-size: var(--t-body); }
.h-sales { container-type: inline-size; min-width: 0; padding: 24px; border-radius: var(--r-lg); background: var(--indigo); color: var(--on-indigo); }
.h-sales-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.h-sales-top .h-go { font-size: var(--t-head); font-weight: 600; }
.h-period { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-ctl); cursor: pointer; font-size: var(--t-body); font-weight: 500; color: var(--on-indigo); background: rgba(255, 255, 255, 0.1); transition: background-color 150ms; }
.h-period:hover { background: rgba(255, 255, 255, 0.18); }
.h-period svg:last-child { opacity: 0.7; }
.h-sales :focus-visible { outline-color: #fff; }
/* shown to the paisa and never cut off: sized to what fits the card for the characters it has */
.h-lead-fig { margin-top: 12px; font-size: clamp(24px, calc(100cqw / (var(--chars, 13) * 0.6)), var(--t-lead)); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; white-space: nowrap; }
.h-lead-fig .dim { color: rgba(255, 255, 255, 0.5); }
.h-sales-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; color: var(--on-indigo-dim); }
.h-sales .tag { height: 24px; border-radius: 4px; font-size: var(--t-small); }
.h-sales .tag.green { background: rgba(86, 214, 150, 0.18); color: #7be3b0; }
.h-sales .tag.red { background: rgba(255, 128, 110, 0.2); color: #ffa497; }
.h-sales .tag.plain { background: rgba(255, 255, 255, 0.12); color: var(--on-indigo-dim); }
.h-bars { display: flex; align-items: flex-end; gap: 8px; height: 132px; margin-top: 24px; }
.h-bars.mid { gap: 4px; }
.h-bars.dense { gap: 1px; }
.h-bars i { flex: 1; display: flex; justify-content: center; min-width: 1px; min-height: 4px; transform-origin: bottom; }
.h-bars i::before { content: ""; width: 100%; max-width: 56px; border-radius: 4px 4px 0 0; background: var(--indigo-bar); transition: background-color 150ms; }
.h-bars.dense i::before { border-radius: 2px 2px 0 0; }
.h-bars i:hover::before { background: #a9aeff; }
.h-bars i.now::before, .h-bars i.now:hover::before { background: var(--accent); }
.h-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--t-small); color: var(--on-indigo-dim); }
.h-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--on-indigo-line); }
.h-foot div { display: grid; gap: 4px; min-width: 0; }
.h-foot small, .h-foot span { font-size: var(--t-small); line-height: 1.4; color: var(--on-indigo-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-foot b { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-foot b.neg { color: #ffa497; }

/* ---------- where the money stands: three figures, each a way in ---------- */
.h-money { display: grid; grid-auto-rows: 1fr; padding: 8px; }
.h-pos { position: relative; display: grid; align-content: center; gap: 4px; min-width: 0; padding: 16px; border-radius: var(--r-ctl); transition: background-color 150ms; }
.h-pos:hover { background: rgba(22, 23, 26, 0.04); }
.h-pos + .h-pos::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; border-top: 1px solid var(--hair); }
.h-pos-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
.h-pos-l .chev { opacity: 0.4; transition: transform 200ms var(--spring), opacity 150ms; }
.h-pos:hover .chev { opacity: 1; transform: translateX(2px); }
.h-pos b { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-pos small { font-size: var(--t-small); line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* how much of it is overdue, as a share of the whole */
.h-meter { display: block; height: 4px; margin: 4px 0; border-radius: 2px; overflow: hidden; background: rgba(22, 23, 26, 0.08); }
.h-meter i { display: block; width: calc(var(--p, 0) * 100%); min-width: 4px; height: 100%; border-radius: 2px; background: var(--bad); transform-origin: left; }

/* ---------- three lists side by side ---------- */
.h-lists { display: grid; gap: 16px; }

@media (min-width: 700px) {
  .h-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-lists > :nth-child(3) { grid-column: 1 / -1; }
}
/* with no rail beside it, the four things to make share one row evenly (no keys shown: there is no keyboard to press them on) */
@media (min-width: 700px) and (max-width: 999px) {
  .h-create { flex: 1 1 100%; }
  .h-make { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-make a { justify-content: center; padding: 0 8px; white-space: nowrap; }
  .h-make kbd { display: none; }
  .skh .t i:last-child { width: 100%; }
}
/* between a phone and a wide screen the three figures sit side by side under the sales card */
@media (min-width: 700px) and (max-width: 1099px) {
  .h-money { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .h-pos { align-content: start; }
  .h-pos + .h-pos::before { left: 0; right: auto; top: 16px; bottom: 16px; border-top: 0; border-left: 1px solid var(--hair); }
}
@media (min-width: 1100px) { .h-lead { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); } }
@media (min-width: 1280px) {
  .h-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-lists > :nth-child(3) { grid-column: auto; }
}

/* ---------- Home on a phone: the same pieces, laid out for a thumb ---------- */
.home3.m { gap: 12px; margin: 0 2px; }
.home3.m .h-card, .home3.m .h-sales { padding: 16px; }
.home3.m .h-money { padding: 4px; }
.home3.m .h-rows { margin: 0 -8px -8px; }
.home3.m .h-row { padding: 12px 8px; }
.home3.m .h-bars { height: 72px; margin-top: 16px; gap: 4px; }
.home3.m .h-bars.mid { gap: 2px; }
.home3.m .h-bars.dense { gap: 1px; }
.home3.m .h-foot { gap: 12px; margin-top: 16px; padding-top: 12px; }
.home3.m .h-foot span { display: none; }
.home3.m .h-foot b { font-size: var(--t-head); }
/* a finger gets 44 points on everything that can be pressed, without the page growing for it */
.home3.m .h-go::after, .home3.m .h-period::after, .home3 .install-card .pill::after, .home3 .install-card .x::after { content: ""; position: absolute; inset: -12px -8px; }
@media (pointer: coarse) { .home3 .h-go::after, .home3 .h-period::after { content: ""; position: absolute; inset: -12px -8px; } }
.home3 .install-card .pill, .home3 .install-card .x { position: relative; }
.h-owes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.h-owes .h-pos { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(22, 23, 26, 0.04); }
.h-owes .h-pos::before { display: none; }
.h-owes .h-pos:active { background: #fbfaf7; }
.h-qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 0; padding: 16px 8px !important; }
.h-qa > a, .h-qa > button { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--t-small); line-height: 1.25; text-align: center; color: var(--ink); }
.h-qa span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--paper); transition: transform 200ms var(--spring); }
.h-qa .lead span { background: var(--accent); color: var(--accent-ink); }
.h-qa :active span { transform: scale(0.94); }
.h-qa .h-tally { grid-column: 1 / -1; justify-content: center; }

/* ---------- arriving, and figures changing: all of it over within a second ---------- */
@keyframes h-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes h-grow { from { transform: scaleY(0); } }
@keyframes h-fill { from { transform: scaleX(0); } }
@keyframes h-draw { to { stroke-dashoffset: 0; } }
@keyframes h-wait { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: no-preference) {
  .h-in > .h-top, .h-in > .install-card, .h-in .h-lead > *, .h-in .h-lists > *, .home3.m.h-in > * { animation: h-rise 480ms var(--spring) both; }
  .h-in .h-lead > :nth-child(1) { animation-delay: 40ms; }
  .h-in .h-lead > :nth-child(2) { animation-delay: 80ms; }
  .h-in .h-lists > :nth-child(1) { animation-delay: 120ms; }
  .h-in .h-lists > :nth-child(2) { animation-delay: 160ms; }
  .h-in .h-lists > :nth-child(3) { animation-delay: 200ms; }
  .home3.m.h-in > :nth-child(2) { animation-delay: 40ms; }
  .home3.m.h-in > :nth-child(3) { animation-delay: 80ms; }
  .home3.m.h-in > :nth-child(4) { animation-delay: 120ms; }
  .home3.m.h-in > :nth-child(n + 5) { animation-delay: 160ms; }
  /* (--step is set on the bars so that, however many there are, the last starts 300ms after the first) */
  .h-in .h-bars i, .h-play .h-bars i { animation: h-grow 480ms var(--spring) both; animation-delay: calc(var(--at, 0ms) + var(--i, 0) * var(--step, 16ms)); }
  .h-in .h-bars { --at: 160ms; }
  #homeSales.h-play .h-bars { --at: 0ms; }
  .h-in .h-meter i { animation: h-fill 560ms var(--spring) 240ms both; }
  .h-in .h-clear circle, .h-in .h-clear path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: h-draw 420ms var(--spring) 280ms forwards; }
  .h-in .h-clear path { animation-duration: 280ms; animation-delay: 620ms; }
  /* other dates were chosen: the card waits where it is while its figures are on the way */
  #homeSales.h-busy .h-lead-fig, #homeSales.h-busy .h-bars, #homeSales.h-busy .h-foot { animation: h-wait 1s ease-in-out 200ms infinite; }
}

/* ---------- while Home loads: its own outline, block for block, so nothing jumps when the figures land ---------- */
.skh { display: grid; gap: 24px; max-width: 1360px; margin: 0 auto; }
.skh i { display: block; border-radius: var(--r-lg); background: rgba(22, 23, 26, 0.07); }
.skh div { display: grid; gap: 16px; }
.skh .t { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.skh .t i { width: 200px; height: 57px; border-radius: var(--r-ctl); }
.skh .t i:last-child { width: min(100%, 738px); height: 66px; }
.skh .a i { height: 458px; }
.skh .b i { height: 445px; }
.skh .a i:first-child { background: color-mix(in srgb, var(--indigo) 18%, transparent); }
@media (min-width: 700px) {
  .skh .b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skh .b i:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 700px) and (max-width: 1099px) { .skh .a i:nth-child(2) { height: 139px; } }
@media (min-width: 1100px) { .skh .a { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); } }
@media (min-width: 1280px) {
  .skh .b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skh .b i:nth-child(3) { grid-column: auto; }
}
@media (max-width: 699px) {
  .skh { gap: 12px; margin: 0 2px; }
  .skh .t { display: none; }
  .skh div { gap: 12px; }
  .skh .a { grid-template-columns: 1fr 1fr; }
  .skh .a i { height: 123px; background: rgba(22, 23, 26, 0.07) !important; }
  .skh .b i { height: 227px; }
  .skh .b i:nth-child(2) { height: 308px; }
  .skh .b i:nth-child(3) { height: 332px; }
}
@media (prefers-reduced-motion: no-preference) {
  .skh i { animation: h-wait 1.4s ease-in-out infinite; }
  .skh .a i:nth-child(2), .skh .b i:nth-child(2) { animation-delay: 120ms; }
  .skh .b i:nth-child(3) { animation-delay: 240ms; }
}