/* =========================================================
   Creative Lab CRM — screens
   Every color, font and size comes from tokens.css.
   ========================================================= */

/* The page frame and motion of the website (theme.css), so the platform feels like part of it */
:root {
  --pad: clamp(1rem, 4vw, 3.5rem);   /* side gutter, 16 to 56px, as on the website */
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --circle-s: 1.5rem;                 /* the mouse circle */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Selected text: the yellow marker behind black text, as on the website */
::selection { background: rgb(247 235 98 / 0.99); color: var(--cl-black); }
html { -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: clip; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
html {
  font-family: var(--cl-font);
  color: var(--cl-ink);
  background: var(--cl-white);
  font-feature-settings: "ss01" 1;   /* open digits, everywhere */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--cl-regular);
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
  font-variation-settings: "opsz" var(--cl-opsz-text);
}
h1, h2, h3, h4, p { margin: 0; }
strong, b { font-weight: var(--cl-semibold); }
em, i { font-style: normal; }
a { color: inherit; }
img, svg { display: block; }
table, time, .num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--cl-ink-muted); }
[dir="auto"] { unicode-bidi: plaintext; }   /* Arabic names read right to left in any line… */
td[dir="auto"], th[dir="auto"], h1[dir="auto"], p[dir="auto"], a[dir="auto"], span[dir="auto"] { text-align: left; }   /* …while the layout keeps its left edge */

/* ---- Type roles */
.headline, h1 {
  font-size: var(--size-headline);
  font-weight: var(--cl-medium);
  line-height: var(--lead-tight);
  letter-spacing: var(--track-headline);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  text-wrap: balance;
}
.subhead, h2 {
  font-size: var(--size-subhead);
  font-weight: var(--cl-semibold);
  line-height: var(--lead-subhead);
  letter-spacing: var(--track-subhead);
  font-variation-settings: "opsz" var(--cl-opsz-display);
}
.small-heading, h3 {
  font-size: var(--size-small-heading);
  font-weight: var(--cl-semibold);
  line-height: var(--lead-subhead);
  letter-spacing: var(--track-subhead);
}
.label {
  font-size: var(--size-label);
  font-weight: var(--cl-medium);
  line-height: var(--lead-label);
  letter-spacing: var(--track-label);
}
.figure {
  font-size: var(--size-headline);
  font-weight: var(--cl-medium);
  line-height: var(--lead-tight);
  letter-spacing: var(--track-headline);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Shell: the website header on top, the page below */
.skip { position: absolute; left: var(--pad); top: -100px; z-index: 100; background: var(--cl-black); color: var(--cl-white); padding: var(--s-1) var(--s-2); text-decoration: none; }
.skip:focus { top: var(--s-1); }
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--cl-white);
  transition: transform 0.35s var(--ease);
}
.header.is-hidden { transform: translateY(-100%); }
.header__inner { height: var(--header-h); padding-inline: var(--pad); display: flex; align-items: center; gap: var(--s-4); }
/* The C: it turns like the pin on the website, flat, around its vertical axis */
.logo { display: block; flex: none; color: var(--cl-black); perspective: 400px; padding: 0.375rem; margin: -0.375rem; }
.logo__c { display: block; transform-style: preserve-3d; }
.logo svg { width: auto; height: 2.25rem; }
@keyframes turn-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }
@keyframes turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .js .logo:not(.has-entered) .logo__c { animation: turn-in 0.9s var(--ease) 0.15s both; }
  .logo.has-entered.is-turning .logo__c { animation: turn 1s var(--ease); }
}
.nav { flex: 1; display: flex; align-items: center; gap: var(--s-4); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-4); }
.menu--me { margin-left: auto; }
.menu form { display: contents; }
.menu a, .menu__button {
  display: inline-block; padding: 0.25rem 0.375rem; margin-inline: -0.375rem;
  background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--cl-black);
  font-family: var(--cl-font); font-size: var(--size-ui); font-weight: var(--cl-medium); line-height: var(--lead-ui);
}
.menu a:hover, .menu__button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* The page you are on: its name in coral, as on the website */
.menu a[aria-current="page"] { color: var(--cl-coral); }

.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; margin: 0 -0.625rem 0 auto; background: none; border: 0; padding: 0; position: relative; cursor: pointer; }
.menu-toggle__lines, .menu-toggle__lines::before {
  position: absolute; left: 0.625rem; right: 0.625rem; height: 2px; background: var(--cl-black);
  transition: transform 0.3s var(--ease);
}
.menu-toggle__lines { top: calc(50% - 4px); }
.menu-toggle__lines::before { content: ""; left: 0; right: 0; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { transform: translateY(-7px) rotate(-90deg); }

/* The menu fits a laptop on one line; below that it opens full screen, as on the website */
@media (max-width: 1100px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 47;
    background: var(--cl-white); padding: var(--s-4) var(--pad);
    flex-direction: column; align-items: flex-start; gap: var(--s-5); overflow-y: auto;
    visibility: hidden; opacity: 0;
    transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s var(--ease); }
  .menu { flex-direction: column; gap: var(--s-2); }
  .menu--me { margin-left: 0; }
  .menu:not(.menu--me) a {
    font-size: var(--size-headline); line-height: var(--lead-tight);
    letter-spacing: var(--track-headline); font-variation-settings: "opsz" var(--cl-opsz-display);
  }
  body.menu-open { overflow: hidden; }
}

.main { display: block; padding: calc(var(--header-h) + var(--s-5)) var(--pad) var(--s-6); min-width: 0; }
.main:focus { outline: none; }
/* Page titles at the website's display size */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.page-head h1 {
  font-size: var(--size-display); line-height: 1; letter-spacing: -0.018em;
}
.page-head__actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
/* The dashboard says hello: the greeting at the title size, one light line under it */
.greeting__line {
  margin-top: var(--s-2); max-width: 36rem;
  font-size: var(--size-subhead); line-height: 1.4; letter-spacing: -0.005em;   /* the Lead role: Regular, -0.5%, 140% */
  font-variation-settings: "opsz" var(--cl-opsz-display); color: var(--cl-ink-muted);
}

/* ---- The circle that follows the mouse: green, a step behind; over links,
   buttons and fields it steps aside (app.js). Mouse only. */
.pin { position: fixed; left: 0; top: 0; z-index: 90; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); --d: var(--circle-s); }
.pin.is-on { opacity: 1; }
.pin[data-state="hide"] { --d: 0px; }
.pin__face {
  position: absolute; left: 0; top: 0;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: var(--cl-green);
  transition-property: width, height, margin, background-color, transform;
  transition-duration: 0.4s, 0.4s, 0.4s, 0.3s, 0.2s; transition-timing-function: var(--ease);
}
/* On green it turns pink, on coral, yellow, pink or blue black, so it always shows (palette colors only, as the website) */
.pin[data-tone="green"] .pin__face { background: var(--cl-pink); }
.pin[data-tone="warm"] .pin__face { background: var(--cl-black); }
.pin.is-down .pin__face { transform: scale(0.85); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .pin { display: none; } }

/* ---- Between pages: the flat yellow sheet of the website. It wipes in from
   the left when you leave and carries on to the right when the next page opens.
   It runs under the white header, so the top edge of the window stays white. */
.sheet { position: fixed; inset: 0; z-index: 49; background: var(--cl-yellow); visibility: hidden; pointer-events: none; transform: translateX(-101%); }
html.arrive .sheet { visibility: visible; transform: none; }
.sheet.is-on { visibility: visible; }
html.leaving .header, html.arrive .header { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .sheet { display: none; } }

/* ---- Arriving: the page head and sections rise once, one calm fade */
.js .main > * { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js.is-ready .main > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .main > * { opacity: 1; transform: none; } }

/* ---- Buttons: square, black; hover turns white */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--control-h); padding: 0 var(--s-3);
  border: var(--line); border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  background: var(--cl-black); color: var(--cl-white);
  font-family: var(--cl-font); font-size: var(--size-ui); font-weight: var(--cl-medium); line-height: var(--lead-ui);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--cl-white); color: var(--cl-black); }
.btn--line { background: var(--cl-white); color: var(--cl-black); }
.btn--line:hover { background: var(--cl-black); color: var(--cl-white); }
.btn--small { min-height: 2.25rem; padding: 0 var(--s-2); }
.btn:active { transform: scale(0.98); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---- Forms */
.form { display: grid; gap: var(--s-3); max-width: 40rem; }
.form--wide { max-width: none; }
.row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.field { display: grid; gap: var(--s-1); align-content: start; }
.field > span { font-size: var(--size-label); font-weight: var(--cl-medium); line-height: var(--lead-label); letter-spacing: var(--track-label); }
.field small { color: var(--cl-ink-muted); font-size: var(--size-label); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; min-height: var(--control-h); padding: 0;
  border: 0; border-bottom: var(--line); border-radius: 0;   /* the website field: one line under the words */
  background: transparent; color: var(--cl-ink);
  font-family: var(--cl-font); font-size: max(1rem, var(--size-ui)); line-height: var(--lead-ui);
  transition: border-color 0.2s var(--ease);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 1.75rem; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") right 0.25rem center / 0.75rem no-repeat;
}
textarea { padding: var(--s-1) 0; min-height: 6rem; line-height: var(--lead-body); resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus { outline: none; border-bottom-width: 2px; }
input:disabled, select:disabled, textarea:disabled { color: var(--cl-ink-muted); border-bottom-color: var(--cl-ink-muted); border-bottom-style: dashed; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--cl-black); outline-offset: 2px;
}
.check { display: flex; gap: var(--s-1); align-items: center; font-size: var(--size-ui); }
.check input { flex: none; }
/* Checkboxes and radios drawn flat in black, as on the website */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.125rem; height: 1.125rem; margin: 0; vertical-align: -0.2em;
  border: 1px solid var(--cl-black); border-radius: 0; background: var(--cl-white);
  display: inline-grid; place-content: center; cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cl-black); transform: scale(0); transition: transform 0.15s var(--ease); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:checked { background: var(--cl-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* ---- Messages */
.flash { padding: var(--s-2); margin-bottom: var(--s-3); background: var(--cl-green-tint); font-size: var(--size-ui); }
.flash--alert { background: var(--cl-coral); }

/* ---- Tables */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: var(--size-ui); line-height: var(--lead-ui); }
.list th {
  text-align: left; padding: var(--s-1) var(--s-2) var(--s-1) 0;
  border-bottom: var(--line);
  font-size: var(--size-label); font-weight: var(--cl-medium); letter-spacing: var(--track-label);
}
.list td { padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: 1px solid var(--cl-green-tint); vertical-align: top; }
.list tfoot td { border-top: var(--line); border-bottom: 0; font-weight: var(--cl-semibold); }
.list .r { text-align: right; padding-left: var(--s-3); padding-right: 0; }
.list--narrow { max-width: 28rem; }
.list a { text-decoration: none; }
.list a:hover { text-decoration: underline; }
.list tbody tr:hover td { background: var(--cl-green-tint); }

/* ---- Status tags */
.tag {
  display: inline-block; padding: 0.125rem var(--s-1);
  border: var(--line);
  font-size: var(--size-label); font-weight: var(--cl-medium); line-height: var(--lead-label); letter-spacing: var(--track-label);
  white-space: nowrap; background: var(--tag-open-bg);
}
.tag--good { background: var(--tag-good-bg); border-color: var(--tag-good-bg); }
.tag--alert { background: var(--tag-alert-bg); border-color: var(--tag-alert-bg); color: var(--cl-ink-on-black); }
.tag--mark { background: var(--tag-mark-bg); border-color: var(--tag-mark-bg); }
.tag--owed { background: var(--tag-owed-bg); border-color: var(--tag-owed-bg); }
.tag--wait { background: var(--tag-wait-bg); border-color: var(--tag-wait-bg); }
.tag--closed { color: var(--tag-closed-ink); border-color: var(--tag-closed-ink); }

/* ---- Cards and panels */
.cards { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: var(--s-5); }
.card { background: var(--cl-green-tint); padding: var(--s-3); display: grid; gap: var(--s-1); align-content: start; overflow-wrap: anywhere; }
.card--line { background: var(--cl-white); border: var(--line); }
.card--green { background: var(--cl-green); }
.card--strong { background: var(--cl-yellow); color: var(--cl-black); }   /* the money: warm yellow, never a black slab */
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { outline: var(--line); outline-offset: -1px; }
.card--strong.card--link { color: var(--cl-black); }
.owed-inline { background: var(--tag-owed-bg); color: var(--cl-black); padding: 0 0.25rem; }   /* invoices not paid yet */
.late-inline { background: var(--tag-alert-bg); color: var(--cl-ink-on-black); padding: 0 0.25rem; }   /* invoices past their due date */
.wait-inline { background: var(--cl-blue); color: var(--cl-black); padding: 0 0.25rem; }   /* quotations awaiting a reply */
.note { background: var(--cl-green-tint); padding: var(--s-2) var(--s-3); display: grid; gap: var(--s-1); max-width: 48rem; }
.toolbar { display: flex; gap: var(--s-1); margin-bottom: var(--s-3); flex-wrap: wrap; }
.toolbar input[type="search"] { width: auto; flex: 1 1 16rem; max-width: 28rem; }
.toolbar select { width: auto; flex: 0 1 12rem; }
.empty { padding: var(--s-4) 0; }
.section { margin-top: var(--s-5); }
.section > h2 { margin-bottom: var(--s-2); }
.section__lead { margin: calc(var(--s-1) * -1) 0 var(--s-2); font-size: var(--size-ui); }

/* ---- Projects: one card each, with how much is paid as a flat green bar */
.projects { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.project { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3); border: var(--line); }
.project__head a { text-decoration: none; }
.project__head a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.project__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.project__title { font-size: var(--size-ui); }
.project__bar { display: block; height: 0.5rem; background: var(--cl-green-tint); }
.project__bar span { display: block; height: 100%; background: var(--cl-green); }
.project__nums { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--size-ui); font-variant-numeric: tabular-nums; }
.project__next { font-size: var(--size-ui); }
.project__next .label, .project__nums .label { margin-right: 0.25rem; }

.points { margin: var(--s-1) 0 0; padding-left: 1.1em; display: grid; gap: 0.125rem; }
.hl { justify-self: start; display: inline-block; margin-top: var(--s-1); background: var(--cl-yellow); color: var(--cl-black); padding: 0.125rem var(--s-1); font-size: var(--size-label); font-weight: var(--cl-medium); }
.page-head__actions form { display: contents; }

/* ---- Settings */
.stamp-preview img { max-height: 8rem; width: auto; background: var(--cl-green-tint); padding: var(--s-1); }
.toolbar input[type="file"] { min-height: var(--control-h); align-self: center; font-size: var(--size-ui); }

/* ---- Reports */
.segmented { display: inline-flex; border: var(--line); }
.seg { display: inline-flex; align-items: center; min-height: calc(var(--control-h) - 2px); padding: 0 var(--s-2); text-decoration: none; font-size: var(--size-ui); font-weight: var(--cl-medium); }
.seg + .seg { border-left: var(--line); }
.seg:hover { background: var(--cl-green-tint); }
.seg--on { background: var(--cl-green); }
.toolbar input[type="date"] { width: auto; }
.legend { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-1); }
.key { display: inline-block; width: 0.75rem; height: 0.75rem; margin-left: var(--s-1); }
.key:first-child { margin-left: 0; }
.months__bars { width: 40%; padding-left: var(--s-3); }
.bar { display: block; height: 0.5rem; margin: 2px 0; }
.bar--quoted, .key--quoted { background: var(--cl-green-tint); outline: 1px solid var(--cl-green); outline-offset: -1px; }
.bar--invoiced, .key--invoiced { background: var(--cl-green); }
.bar--collected, .key--collected { background: var(--cl-coral); }

/* ---- Document editor */
.editor__grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s-5); align-items: start; }
.editor__main { display: grid; gap: var(--s-3); min-width: 0; }
.editor__side { position: sticky; top: calc(var(--header-h) + var(--s-3)); display: grid; gap: var(--s-2); }
.editor__actions { display: grid; gap: var(--s-1); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.item { border: var(--line); padding: var(--s-3); display: grid; gap: var(--s-2); }
.item__head { display: flex; justify-content: space-between; align-items: center; }
.item__tools { display: flex; gap: var(--s-2); }
.item__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick { background: var(--cl-green-tint); padding: var(--s-3); display: grid; gap: var(--s-2); }
.totals { background: var(--cl-green); color: var(--cl-black); padding: var(--s-3); display: grid; gap: var(--s-1); }
.totals .num:not(.figure) { font-size: var(--size-ui); }
.totals__discount { margin: var(--s-1) 0; }
.totals__discount span { color: var(--cl-black); }
.totals__total { margin-top: var(--s-1); }
.saving { justify-self: start; background: var(--cl-coral); color: var(--cl-black); padding: 0.125rem var(--s-1); font-size: var(--size-label); font-weight: var(--cl-medium); }
.plan-preview { font-size: var(--size-label); color: var(--cl-ink-muted); }
@media (max-width: 64rem) {
  .editor__grid { grid-template-columns: 1fr; }
  .editor__side { position: static; }
}

/* ---- Sign-in screens */
.auth .main { padding-top: calc(var(--header-h) + var(--s-6)); }
.auth__card { width: 100%; max-width: 30rem; display: grid; gap: var(--s-4); }
.auth__card h1 { font-size: var(--size-display); line-height: 1; letter-spacing: -0.018em; }

}

/* ==== Growth: the overview ==== */
.growth-filters { flex-wrap: wrap; }
.seg--static { cursor: default; }
.seg--static:hover { background: transparent; }
.growth-sample { margin: 0 0 var(--s-3); }
.growth-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
@media (max-width: 52rem) { .growth-two { grid-template-columns: 1fr; } }

/* the monthly goal: black fills a green tint, like the paid bar on projects */
.goal { display: grid; gap: var(--s-1); }   /* full width, like every other block */
.goal__bar { display: block; height: 0.75rem; background: var(--cl-green-tint); }
.goal__bar span { display: block; height: 100%; background: var(--cl-black); }
.goal__nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); font-size: var(--size-ui); font-variant-numeric: tabular-nums; }

/* sales by day: one green column a day, days still ahead as an empty line */
.days { display: flex; align-items: flex-end; gap: 3px; height: 8rem; border-bottom: var(--line); }
.days__day { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.days__day > span { display: block; width: 100%; background: var(--cl-green); min-height: 0; }
.days__day:hover > span { background: var(--cl-black); }
.days__day--ahead > span { background: transparent; }
.days__axis { display: flex; justify-content: space-between; margin-top: var(--s-1); }

/* from visit to order: each step as a share of the visits */
.step { display: grid; gap: 0.375rem; margin-bottom: var(--s-2); }
.step__text { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--size-ui); font-variant-numeric: tabular-nums; }
.step__bar { display: block; height: 0.5rem; background: var(--cl-green-tint); }
.step__bar span { display: block; height: 100%; background: var(--cl-green); }

/* where orders go: Bahrain black, the GCC blue (the Aramex lane) */
.split { display: flex; height: 0.75rem; margin-bottom: var(--s-2); }
.split__bh { background: var(--cl-black); }
.split__gcc { flex: 1; background: var(--cl-blue); }
.key--bh { background: var(--cl-black); margin: 0 var(--s-1) 0 0; }
.key--gcc { background: var(--cl-blue); margin: 0 var(--s-1) 0 0; }
.split__countries { margin-top: var(--s-2); }
.list--split td:first-child { width: 100%; }   /* the name takes the room, so the count sits next to the amount */
/* an Arabic name starts from its own side (right) inside an English table */
.list td[dir="auto"] { text-align: start; }

/* needs you: the one coral alert (carts left), then the yellow highlighter (low stock) */
.needs { display: grid; gap: var(--s-2); }
.need { padding: var(--s-3); display: grid; gap: var(--s-1); color: var(--cl-black); }
.need--alert { background: var(--cl-coral); }
.need--mark { background: var(--cl-yellow); }
.need__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--size-ui); }
.need__list li { display: flex; justify-content: space-between; gap: var(--s-2); }

/* notes on the chart: a small black tag under the day, and the list with the form below */
.days__notes { display: flex; gap: 3px; margin-top: 0.375rem; height: 1.25rem; }
.days__mark { flex: 1 1 0; display: flex; justify-content: center; }
.days__mark i { font-style: normal; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; background: var(--cl-black); color: var(--cl-white); font-size: 0.6875rem; font-weight: var(--cl-medium); font-variant-numeric: tabular-nums; cursor: default; }
.notes { margin-top: var(--s-3); display: grid; gap: var(--s-3); }
.notes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--size-ui); }
.notes__list li { display: flex; gap: var(--s-2); align-items: baseline; }
.notes__list form { display: contents; }
.notes__list .link-btn { margin-left: auto; font-size: var(--size-label); }
.notes__day { flex: none; min-width: 3.5rem; font-weight: var(--cl-medium); font-variant-numeric: tabular-nums; }
.notes__add { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 9rem auto; gap: var(--s-2); align-items: end; }
@media (max-width: 52rem) { .notes__add { grid-template-columns: 1fr 1fr; } .notes__text { grid-column: 1 / -1; } }

/* links */
.link-made { display: block; margin-top: 0.125rem; }
.list td form { display: inline; margin-left: var(--s-2); }