/*
 * Mixin HQ: dark, warm, and coloured where colour says something. Mixin's own colours
 * (Warm Ink, Smoke, Cream, Wine, and each product's), Inter for what is read and compared,
 * Ubuntu for what is looked at. A colour always means one thing: green, amber and red are
 * a state; a product's colour names that product; Wine is Mixin itself, and money going
 * out. Nothing moves on its own: the page changes only when what it shows changes.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ubuntu-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ubuntu-700.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #1e1b1a; /* Warm Ink */
  --card: #262220;
  --card-raised: #2d2927;
  --track: #3b3634; /* Smoke */
  --line: rgba(244, 239, 232, 0.07);
  --line-strong: rgba(244, 239, 232, 0.13);
  --text: #f4efe8; /* Cream */
  --text-2: #bdb3aa;
  --text-3: #9a9089;

  /* States: always beside a word, never alone. */
  --ok: #4fd1a0;
  --warn: #f2b84b;
  --down: #ff6b6b;

  /* Each product's colour: a fill under Cream, and a lighter one for its lines. */
  --paie: #7a1f2b;
  --paie-line: #d05d6c;
  --caisse: #49755b;
  --caisse-line: #74b08f;
  --agenda: #4e6e91;
  --agenda-line: #86a6cc;

  /* Mixin's Wine: a ground with Cream on it, and its lighter mark on the dark. */
  --wine: #7a1f2b;
  --wine-line: #d05d6c;

  /* The soft grounds under each colour's own words and icons. */
  --ok-soft: rgba(79, 209, 160, 0.13);
  --warn-soft: rgba(242, 184, 75, 0.13);
  --down-soft: rgba(255, 107, 107, 0.14);
  --wine-soft: rgba(208, 93, 108, 0.15);
  --neutral-soft: rgba(244, 239, 232, 0.06);

  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-visual: 'Ubuntu', 'Inter', system-ui, sans-serif;
  --radius: 16px;
  --gap: 16px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Mixin's Wine, low in the sky over the page: HQ is Mixin's own. */
  background:
    radial-gradient(1100px 460px at 8% -160px, rgba(122, 31, 43, 0.34), rgba(122, 31, 43, 0) 70%),
    radial-gradient(700px 360px at 100% -200px, rgba(122, 31, 43, 0.16), rgba(122, 31, 43, 0) 70%),
    var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--font-ui);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* Opened from the phone's home screen, the page runs under the clock and the battery: this
   strip of Warm Ink keeps what scrolls from passing under them. Nothing in a browser tab. */
body::before {
  content: '';
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--bg);
}

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 32px 48px;
}

/* ── The bar on top ─────────────────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

/* Mixin's mark in Cream on a Wine tile, as on the app's icon. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--wine);
  box-shadow: inset 0 1px 0 rgba(244, 239, 232, 0.08);
}

.brand__mark::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--text);
  -webkit-mask: url('/mark.svg') center / contain no-repeat;
  mask: url('/mark.svg') center / contain no-repeat;
}

.brand__word {
  font: 400 19px/1 var(--font-visual);
  color: var(--text-2);
}

.brand__word b {
  font-weight: 700;
  color: var(--text);
}

.badge {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--warn);
  background: rgba(242, 184, 75, 0.1);
}

.live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
}

.live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.live--lost {
  color: var(--down);
}

.live--lost .live__dot {
  background: var(--down);
}

.button {
  font: 500 13px/1 var(--font-ui);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
}

.button:hover {
  background: var(--card-raised);
}

.button:disabled {
  cursor: default;
  color: var(--text-2);
}

.button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.button--small {
  padding: 6px 11px;
  font-size: 12.5px;
  border-radius: 8px;
}

.button--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}

.button--quiet:hover {
  background: var(--card-raised);
  color: var(--text);
}

/* Mixin's Wine is a ground, with Cream on it: the one button that saves. */
.button--primary {
  background: var(--wine);
  border-color: var(--wine);
}

.button--primary:hover {
  background: #8c2733;
}

.icon-button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.icon-button:hover {
  background: var(--card-raised);
  color: var(--down);
}

/* ── The three views ────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 4px;
  margin-right: auto;
  margin-left: 18px;
  padding: 3px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
}

.tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 12px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.tabs a svg {
  width: 15px;
  height: 15px;
}

.tabs a:hover {
  color: var(--text);
  background: var(--neutral-soft);
}

.tabs a:focus-visible {
  outline: 2px solid var(--wine-line);
  outline-offset: 2px;
}

.tabs .tabs__on,
.tabs .tabs__on:hover {
  background: var(--wine);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(244, 239, 232, 0.1), 0 6px 18px rgba(122, 31, 43, 0.35);
}

.tabs__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--down);
}

.brand {
  margin-right: 0;
}

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 24px;
}

.page-title {
  margin: 0;
  font: 700 36px/1.1 var(--font-visual);
  letter-spacing: -0.01em;
}

.footnote {
  margin: 24px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

/* ── The state of everything ───────────────────────────────────────────────── */

/* The state of everything, on a ground of its own colour: seen from across the room. */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
  padding: 28px 30px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
}

.hero--ok {
  border-color: rgba(79, 209, 160, 0.22);
  background: linear-gradient(115deg, rgba(79, 209, 160, 0.17), rgba(79, 209, 160, 0.04) 45%, rgba(79, 209, 160, 0) 75%), var(--card);
}

.hero--warn {
  border-color: rgba(242, 184, 75, 0.3);
  background: linear-gradient(115deg, rgba(242, 184, 75, 0.17), rgba(242, 184, 75, 0.04) 45%, rgba(242, 184, 75, 0) 75%), var(--card);
}

.hero--down {
  border-color: rgba(255, 107, 107, 0.4);
  background: linear-gradient(115deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.05) 45%, rgba(255, 107, 107, 0) 75%), var(--card);
}

.hero h1 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font: 700 44px/1.1 var(--font-visual);
  letter-spacing: -0.01em;
}

.hero__sub {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

.problems {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.problems li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-2);
}

.problems b {
  color: var(--text);
  font-weight: 600;
}

.facts {
  display: flex;
  gap: 36px;
  margin: 0;
}

.facts div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}

.facts div + div {
  padding-left: 32px;
  border-left: 1px solid var(--line-strong);
}

.facts dt {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.facts dd {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.facts small,
.metric small {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 3px;
  letter-spacing: 0;
}

/* ── Dots, words, chips ─────────────────────────────────────────────────────── */

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--track);
}

.dot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(79, 209, 160, 0.14);
}

.dot--warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.16);
}

.dot--down {
  background: var(--down);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18);
}

.dot--past {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--text-3);
}

.dot--lg {
  width: 14px;
  height: 14px;
}

.dot--lg.dot--ok {
  box-shadow: 0 0 0 6px rgba(79, 209, 160, 0.12), 0 0 28px rgba(79, 209, 160, 0.35);
}

.dot--lg.dot--warn {
  box-shadow: 0 0 0 6px rgba(242, 184, 75, 0.14), 0 0 28px rgba(242, 184, 75, 0.35);
}

.dot--lg.dot--down {
  box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.16), 0 0 28px rgba(255, 107, 107, 0.4);
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.state--ok {
  color: var(--ok);
}

.state--warn {
  color: var(--warn);
}

.state--down {
  color: var(--down);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 8px;
  font: 700 14px/1 var(--font-visual);
  color: var(--text);
}

.chip--paie {
  background: var(--paie);
}

.chip--caisse {
  background: var(--caisse);
}

.chip--agenda {
  background: var(--agenda);
}

.note {
  font-size: 12px;
  color: var(--text-3);
}

.tag {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--warn);
  background: rgba(242, 184, 75, 0.1);
  white-space: nowrap;
}

.tag--down {
  color: var(--down);
  background: rgba(255, 107, 107, 0.12);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */

.label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: 32px;
}

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.cols--wide-left {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.stack {
  display: grid;
  gap: var(--gap);
  min-width: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  min-width: 0;
}

.card h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  font: 700 17px/1.2 var(--font-visual);
}

.card h2 .count {
  font: 500 13px/1 var(--font-ui);
  color: var(--text-3);
}

/* "7 sur 7 au vert", in the colour of what it counts. */
.card h2 .count--ok,
.card h2 .count--warn,
.card h2 .count--down {
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.card h2 .count--ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.card h2 .count--warn {
  color: var(--warn);
  background: var(--warn-soft);
}

.card h2 .count--down {
  color: var(--down);
  background: var(--down-soft);
}

/* A card's title, after its icon. */
.title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* A line icon on a soft ground of its colour: Wine for Mixin's own things, a state's
   colour where the card has one. */
.ico {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--wine-soft);
  color: var(--wine-line);
}

.ico svg {
  width: 16px;
  height: 16px;
}

.ico--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.ico--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.ico--down {
  background: var(--down-soft);
  color: var(--down);
}

.ico--neutral {
  background: var(--neutral-soft);
  color: var(--text-2);
}

/* Something wrong is seen from across the room. */
.card--warn {
  border-color: rgba(242, 184, 75, 0.4);
}

.card--down {
  border-color: rgba(255, 107, 107, 0.45);
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.07), rgba(255, 107, 107, 0) 60%), var(--card);
}

/* ── A product ──────────────────────────────────────────────────────────────── */

/* Each product's card wears its colour at the top, as its chip does. */
.product {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, var(--tint), rgba(38, 34, 32, 0) 140px), var(--card);
}

.product--paie {
  --line-colour: var(--paie-line);
  --tint: rgba(122, 31, 43, 0.34);
}

.product--caisse {
  --line-colour: var(--caisse-line);
  --tint: rgba(73, 117, 91, 0.32);
}

.product--agenda {
  --line-colour: var(--agenda-line);
  --tint: rgba(78, 110, 145, 0.32);
}

.product.card--down {
  --tint: rgba(255, 107, 107, 0.16);
}

.product__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product__head .state {
  margin-left: auto;
}

.product__numbers {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric--right {
  align-items: flex-end;
}

.metric__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.metric__label {
  font-size: 12px;
  color: var(--text-3);
}

.spark {
  position: relative;
  margin: 0;
  color: var(--line-colour);
  cursor: crosshair;
}

.spark svg {
  display: block;
  width: 100%;
  height: 64px;
  overflow: visible;
}

.spark__down {
  fill: var(--down);
  opacity: 0.16;
}

.spark__down-mark {
  fill: var(--down);
}

.spark__base {
  stroke: var(--line-strong);
}

.spark__cursor {
  position: absolute;
  top: 0;
  bottom: 22px;
  width: 1px;
  background: var(--text-2);
  pointer-events: none;
}

.spark__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.spark__empty {
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(244, 239, 232, 0.025);
  color: var(--text-3);
  font-size: 12px;
}

.product__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}

.product__foot span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product__foot span:last-child {
  white-space: nowrap;
  color: var(--text-2);
}

.tip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  padding: 7px 10px;
  border-radius: 8px;
  background: #3b3634;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.tip b {
  font-weight: 600;
}

.tip span {
  color: var(--text-2);
}

/* ── The clients ────────────────────────────────────────────────────────────── */

.client {
  margin-bottom: 32px;
}

.restaurant + .restaurant {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.restaurant__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.restaurant__name {
  font-weight: 600;
  font-size: 15px;
  margin-right: 4px;
}

.chip--sm {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
}

.restaurant__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: end;
}

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

/* A figure is told by one product: a bar of its colour beside it, and its number in it. */
.figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-left: 14px;
  border-left: 3px solid var(--tone, var(--line-strong));
}

.figure__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tone-text, var(--text));
}

.figure--paie {
  --tone: var(--paie-line);
  --tone-text: var(--paie-line);
}

.figure--caisse {
  --tone: var(--caisse-line);
  --tone-text: var(--caisse-line);
}

.figure--agenda {
  --tone: var(--agenda);
}

.figure__label {
  font-size: 13px;
  color: var(--text-2);
}

.figure__note {
  font-size: 12px;
  color: var(--text-3);
}

.figure__note--warn {
  color: var(--warn);
}

.figure--soon .figure__value {
  color: var(--text-3);
}

.figure--soon .figure__note {
  color: var(--agenda-line);
}

.bars {
  margin: 0;
  min-width: 0;
}

.bars__title {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
}

.bars__plot {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 150px;
}

.bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  cursor: default;
}

.bars__value {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
}

/* The people who worked come from Paie: its colour, from its light mark down to its Wine. */
.bars__bar {
  width: 100%;
  max-width: 34px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--paie-line), var(--paie));
  transition: filter 0.15s;
}

/* Not all of its days are in the payroll yet: drawn, but as a texture. */
.bars__bar--partial {
  background: repeating-linear-gradient(135deg, var(--paie-line) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px var(--paie-line);
}

.bars__col:hover .bars__bar {
  filter: brightness(1.25);
}

.bars__month {
  margin-top: 6px;
  padding-top: 6px;
  width: 100%;
  text-align: center;
  border-top: 1px solid var(--line-strong);
  font-size: 11px;
  color: var(--text-3);
}

.client h2 .button {
  font-family: var(--font-ui);
}

.billing {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.billing__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 16px;
}

.terms__price,
.terms__facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.terms__price {
  font-size: 15px;
}

.terms__price b {
  font-weight: 600;
}

.terms__facts {
  font-size: 13px;
  color: var(--text-2);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--line-strong);
}

.table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.table th:not(:first-child),
.table td:not(:first-child) {
  text-align: right;
}

.table tr:last-child td {
  border-bottom: 0;
}

/* ── Forms: one click fills, one click saves ───────────────────────────────── */

.form {
  margin-bottom: var(--gap);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  margin-bottom: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}

.field__hint {
  font-size: 11.5px;
  color: var(--text-3);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  font: 400 14px/1.3 var(--font-ui);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 9px 11px;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--text-2);
  box-shadow: 0 0 0 3px rgba(244, 239, 232, 0.08);
}

input::placeholder {
  color: var(--text-3);
}

.invalid {
  border-color: var(--down);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-2);
  white-space: nowrap;
}

.check input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--paie-line);
}

.restaurant-rows {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.restaurant-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.restaurant-row__name {
  max-width: 280px;
}

.form__error {
  margin: 14px 0 0;
  color: var(--down);
  font-size: 13.5px;
}

.form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  padding-bottom: 18px;
  margin-bottom: 4px;
}

.inline-form .form__actions,
.inline-form .form__error {
  grid-column: 1 / -1;
  margin-top: 0;
}

.row--clickable {
  cursor: pointer;
}

.row--clickable:hover {
  background: rgba(244, 239, 232, 0.025);
}

.row--ended .row__title,
.row--ended .amount {
  color: var(--text-3);
}

.amount {
  font-weight: 600;
  color: var(--text);
}

.amount--in {
  color: var(--ok);
}

.amount--out {
  color: var(--wine-line);
}

/* A short word on a soft ground: how often, or how soon. */
.pill {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text-2);
  background: var(--neutral-soft);
  white-space: nowrap;
}

.pill--soon {
  color: var(--warn);
  background: var(--warn-soft);
}

/* The day a payment falls, as on a calendar: amber when it is within a week. */
.date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--wine-soft);
  color: var(--wine-line);
  line-height: 1;
}

.date b {
  font: 700 18px/1 var(--font-visual);
  color: var(--text);
}

.date span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
}

.date--soon {
  background: var(--warn-soft);
  color: var(--warn);
}

.button--cancel:hover {
  background: var(--wine-soft);
  color: var(--wine-line);
}

/* The month's money in four tiles, each in the colour of what it counts. */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 18px 20px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--kpi-tint, transparent), rgba(38, 34, 32, 0) 110px), var(--card);
}

.kpi .ico {
  margin-bottom: 12px;
}

.kpi__value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.kpi__label {
  font-size: 13px;
  color: var(--text-2);
}

.kpi__note {
  font-size: 12px;
  color: var(--warn);
}

.kpi--ok {
  --kpi-tint: rgba(79, 209, 160, 0.1);
}

.kpi--ok .kpi__value {
  color: var(--ok);
}

.kpi--wine {
  --kpi-tint: rgba(122, 31, 43, 0.28);
}

.kpi--wine .kpi__value {
  color: var(--wine-line);
}

.kpi--down {
  --kpi-tint: rgba(255, 107, 107, 0.1);
}

.kpi--down .kpi__value {
  color: var(--down);
}

.pos {
  color: var(--ok);
}

/* ── Money ──────────────────────────────────────────────────────────────────── */

.money-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}

.money-chart {
  margin-bottom: var(--gap);
}

.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
  font-size: 12.5px;
  color: var(--text-2);
}

.legend__key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend__key + .legend__key,
.legend__key:not(:first-child) {
  margin-left: 12px;
}

/* Money in is green, money out is Mixin's Wine: the same two colours everywhere on the page. */
.legend__key--in {
  background: var(--ok);
}

.legend__key--out {
  background: var(--wine-line);
}

.bars__plot--money {
  height: 170px;
  gap: 10px;
}

.bars__pair {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
}

.bars__pair .bars__bar {
  max-width: 18px;
}

.bars__bar--in {
  background: linear-gradient(180deg, var(--ok), rgba(79, 209, 160, 0.45));
}

.bars__bar--out {
  background: linear-gradient(180deg, var(--wine-line), var(--wine));
}

.spark__empty--tall {
  height: 140px;
  text-align: center;
  padding: 0 16px;
}

/* ── The machine ────────────────────────────────────────────────────────────── */

.meter + .meter {
  margin-top: 18px;
}

.meter__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 14px;
}

.meter__top b {
  font-weight: 600;
}

.muted {
  color: var(--text-3);
}

.meter__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--track);
}

.meter__fill {
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79, 209, 160, 0.5), var(--ok));
}

.meter--warn .meter__fill {
  background: linear-gradient(90deg, rgba(242, 184, 75, 0.5), var(--warn));
}

.meter--down .meter__fill {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.5), var(--down));
}

.meter__limit {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text-3);
}

.minifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}

.minifacts b {
  color: var(--text);
  font-weight: 600;
}

/* ── Lists of rows ──────────────────────────────────────────────────────────── */

.rows {
  list-style: none;
  margin: 0 -22px -8px;
  padding: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-top: 1px solid var(--line);
  transition: background-color 0.15s;
}

.rows .row:hover {
  background: rgba(244, 239, 232, 0.03);
}

.row__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}

.row__title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__sub {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__sub--code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
}

.row__right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  text-align: right;
}

.row--down .row__right > span:last-child {
  color: var(--down);
}

.row--warn .row__right > span:last-child {
  color: var(--warn);
}

.empty {
  margin: 0;
  padding: 6px 0 4px;
  color: var(--text-3);
}

/* The requests for a demonstration, newest first. */
.demande {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.demande:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.demande__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.demande__message {
  margin: 6px 0 0;
  white-space: pre-wrap;
  color: var(--text-2);
}

/* ── The bottom line ────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 28px;
  font-size: 12.5px;
  color: var(--text-3);
}

.chan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.foot__last {
  margin-left: auto;
}

.foot__fail {
  color: var(--down);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ── Phones ─────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .money-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .shell {
    padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 16px 36px;
  }
  .top {
    flex-wrap: wrap;
    padding-bottom: 20px;
  }
  .live {
    order: 3;
    width: 100%;
  }
  .hero {
    padding: 22px 20px;
  }
  .hero h1 {
    font-size: 32px;
    gap: 12px;
  }
  .facts div + div {
    padding-left: 0;
    border-left: 0;
  }
  .kpi__value {
    font-size: 23px;
  }
  .tabs a {
    justify-content: center;
  }
  .tabs a svg {
    display: none;
  }
  /* A row with more on its right than a phone has room for: the right goes under. */
  .row--wrap {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .row--wrap .row__main {
    flex: 1 1 100%;
  }
  .row--wrap .row__right {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  /* The date's own tile already says it is close. */
  .row--dated .pill {
    display: none;
  }
  .facts {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .facts dd {
    font-size: 21px;
  }
  .cols,
  .cols--wide-left,
  .restaurant__body,
  .form__grid,
  .inline-form {
    grid-template-columns: 1fr;
  }
  .money-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tabs {
    order: 4;
    width: 100%;
    margin: 4px 0 0;
  }
  .tabs a {
    flex: 1;
    text-align: center;
  }
  .page-title {
    font-size: 30px;
  }
  .restaurant-row {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .restaurant-row__name {
    max-width: none;
  }
  .figure__value {
    font-size: 26px;
  }
  /* The client's name on its line, its counts under it, « Modifier » under the text. */
  .client h2 {
    flex-direction: column;
    align-items: flex-start;
  }
  .client h2 .title {
    align-items: flex-start;
  }
  .client h2 .count {
    display: block;
    margin-top: 5px;
    line-height: 1.4;
  }
  .client h2 .button {
    margin-left: 41px;
  }
  /* A phone has no room to cut a name short: it goes on two lines. */
  .row__title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .bars__plot {
    gap: 3px;
  }
  .bars__value {
    font-size: 10px;
  }
  .card {
    padding: 18px;
  }
  .rows {
    margin: 0 -18px -6px;
  }
  .row {
    padding: 11px 18px;
  }
  .foot__last {
    margin-left: 0;
  }
  /* Below 16 pixels, the iPhone zooms in on a field as it is touched, and stays zoomed. */
  input,
  select,
  textarea {
    font-size: 16px;
  }
  /* Room for a thumb. */
  .tabs a {
    min-height: 40px;
    font-size: 14.5px;
  }
  .button {
    min-height: 40px;
  }
  .button--small {
    min-height: 34px;
  }
  .shell {
    padding-bottom: calc(env(safe-area-inset-bottom) + 28px);
  }
}

/* ── Pairing: the one page a device not paired sees ─────────────────────────── */

.pair {
  max-width: 400px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 56px) 24px calc(env(safe-area-inset-bottom) + 40px);
}

.pair h1 {
  font: 700 27px/1.2 var(--font-visual);
  margin: 40px 0 12px;
}

.pair p {
  color: var(--text-2);
  margin: 0 0 28px;
}

.pair code {
  font: 500 13px/1 ui-monospace, Menlo, monospace;
  color: var(--text);
  background: var(--card-raised);
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.pair__form {
  display: grid;
  gap: 10px;
}

.pair__form label {
  font-size: 13px;
  color: var(--text-2);
}

/* Large enough that the phone does not zoom in on it, and that eight digits read at a glance. */
.pair__form input {
  font: 600 28px/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background: var(--card);
}

.pair__form input::placeholder {
  color: rgba(244, 239, 232, 0.2);
}

.pair__form input:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.pair__form .button {
  margin-top: 6px;
  padding: 15px;
  font-size: 16px;
  border-radius: 12px;
}

.pair .pair__error {
  color: var(--down);
  margin: 4px 0 0;
}