/* ===================================================================== *
   THE TYPE IS IN THE ZIP NOW, NOT ON GOOGLE'S SERVERS.
   ---------------------------------------------------------------------
   This file used to open by importing four families from fonts.googleapis.
   That was one more thing that had to be reachable for a bill to look
   right: on a weak connection, on a plane, or on a machine printing the
   sheet without a person watching, the request can be slow or refused and
   the page quietly falls back to whatever the system has. A bill a client
   compares against last month's cannot change face because a font server
   was busy.

   So the four faces are files sitting beside this one. The three Red Hat
   families are single VARIABLE fonts -- one file each carries every weight
   from 400 to 900, which is why there is no list of six. Tajawal is not
   variable, so its four weights are four files, each split into the Latin
   and the Arabic part so a page showing no Arabic never downloads it.

   184 KB in total, cached after the first visit, and nothing leaves the
   site to fetch it. Every face the site uses is one of these files.
   ===================================================================== */


@font-face {
  font-family: "Red Hat Display";
  src: url("rh-display.woff2") format("woff2-variations"), url("rh-display.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Red Hat Text";
  src: url("rh-text.woff2") format("woff2-variations"), url("rh-text.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Red Hat Mono";
  src: url("rh-mono.woff2") format("woff2-variations"), url("rh-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  src: url("tajawal-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  src: url("tajawal-400-ar.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Tajawal";
  src: url("tajawal-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  src: url("tajawal-500-ar.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Tajawal";
  src: url("tajawal-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  src: url("tajawal-700-ar.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Tajawal";
  src: url("tajawal-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  src: url("tajawal-900-ar.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}


/* =====================================================================
   THE SEEN IDENTITY
   Taken from your branding guideline, not invented here:
     type     Red Hat Display (English), Tajawal (Arabic)
     colour   #C15F10  #D37223  #F08F3C  #FFB87A
     mark     the lowercase "seen" with the two orange irises

   THREE THINGS THE GUIDELINE DOES NOT DECIDE, AND WHY THEY ARE WHAT THEY ARE

   1. #C15F10 does not have enough contrast for small text. On this paper
      it reads at 3.9:1 and white on top of it reads at 4.3:1, where 4.5
      is the line for text you expect people to read at 13px in a table of
      forty rows. So the brand orange is used at full strength wherever it
      is a FILL -- the bar on a tab, a button, a block -- and links and
      small type use --accent, which is the identical hue and saturation
      taken down four points of lightness to #AE560E. It reads at 4.6:1.
      Side by side you would not name which is which; at 11px one is
      legible and the other is not.

   2. Danger used to be a burnt red that is now four degrees of hue from
      the brand. "Overdue" and "delete" have to not look like the company
      colour, so they moved to a true red. Warning moved the other way,
      to gold. Neither carries meaning on its own anywhere in this app --
      the word is always there too -- but a colour that means "stop"
      should not be the colour that means "SEEN".

   3. The greys are warm now. That is most of what you will notice: the
      page was built on a blue-grey that fought the orange at every edge.
      Nothing else about the layout changed.

   ARABIC: Tajawal, everywhere, decided on 16 Sep. The stack used to name a
   licensed face first, which meant the Arabic looked one way on a machine
   that had it installed and another way on every other machine -- and a
   bill a client compares against last month's must not change face
   depending on whose laptop printed it. One face, in the zip, on every
   screen and every sheet. That is worth more than the nicer face.
   ===================================================================== */

:root {
  /* warm neutrals, so the orange sits in the page instead of on top of it */
  --paper:#F7F4F1; --surface:#FFFDFB; --surface-2:#EFE9E3; --surface-3:#E4DCD4;
  --ink:#1B1512; --ink-soft:#6B5D55; --ink-faint:#9B8B81;
  --rule:#DED4CB; --rule-soft:#EDE6DF;

  /* the guideline ramp, exactly */
  --brand:#C15F10; --brand-2:#D37223; --brand-3:#F08F3C; --brand-4:#FFB87A;
  /* the readable member of it, for text and small marks */
  --accent:#AE560E; --accent-dim:#FBEEE2; --accent-ink:#FFFFFF;

  --signal:#A5192B; --signal-dim:#F9E6E7; --signal-ink:#FFFFFF;
  --ok:#2E6B4E; --ok-dim:#E5EFE9;
  --amber:#7E6100; --amber-dim:#F6EFDC;

  --display:"Red Hat Display",system-ui,-apple-system,sans-serif;
  --body:"Red Hat Text","Red Hat Display",system-ui,-apple-system,sans-serif;
  --mono:"Red Hat Mono",ui-monospace,Menlo,monospace;
  --arabic:"Tajawal",system-ui,sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#14100D; --surface:#1C1714; --surface-2:#251F1A; --surface-3:#302822;
    --ink:#EFE7E0; --ink-soft:#B3A79E; --ink-faint:#8A7E75;
    --rule:#352D26; --rule-soft:#251F1A;
    --brand:#F08F3C; --brand-2:#D37223; --brand-3:#F08F3C; --brand-4:#FFB87A;
    --accent:#F08F3C; --accent-dim:#33200F; --accent-ink:#1A1007;
    --signal:#F0685F; --signal-dim:#2E1517; --signal-ink:#2A0E0B; --signal-ink:#2A0E0B;
    --ok:#6FC095; --ok-dim:#14261C;
    --amber:#E0BE5A; --amber-dim:#28210F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#14100D; --surface:#1C1714; --surface-2:#251F1A; --surface-3:#302822;
  --ink:#EFE7E0; --ink-soft:#B3A79E; --ink-faint:#8A7E75;
  --rule:#352D26; --rule-soft:#251F1A;
  --brand:#F08F3C; --brand-2:#D37223; --brand-3:#F08F3C; --brand-4:#FFB87A;
  --accent:#F08F3C; --accent-dim:#33200F; --accent-ink:#1A1007;
  --signal:#F0685F; --signal-dim:#2E1517; --signal-ink:#2A0E0B;
  --ok:#6FC095; --ok-dim:#14261C;
  --amber:#E0BE5A; --amber-dim:#28210F;
  color-scheme: dark;
}

/* anything with Arabic in it picks up the Arabic face automatically */
[dir="auto"], [dir="rtl"], .ar { font-family: var(--arabic), var(--body); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.55;
  padding-inline: 18px; padding-block: 0 80px;
  -webkit-font-smoothing: antialiased;
}

/* Opened from the home screen there is no browser chrome, so the page starts
   under the clock and ends under the home bar. These put it back. They apply
   only in standalone -- in a normal tab the insets are zero anyway, but the
   query keeps the two cases honest. */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}
.wrap { max-width: 1080px; margin-inline: auto; }

/* ---------- top ---------- */
.topbar {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline;
  justify-content: space-between; padding-block: 22px 14px;
  border-bottom: 2px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The mark itself, not the word set in a font. It is the one thing in the
   guideline that cannot be approximated. */
.brand .mark { height: 26px; width: auto; display: block; }
.brand h1 {
  font-family: var(--display); font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; margin: 0; line-height: 1;
}
.brand .sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.whoami { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.whoami .role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent);
  padding: 2px 7px; border-radius: 2px;
}

nav.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 16px; }
nav.tabs a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 9px 13px; text-decoration: none;
  border-bottom: 2px solid transparent;
}
nav.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
nav.tabs a:hover { color: var(--ink); }
nav.tabs .count {
  display: inline-block; min-width: 16px; text-align: center;
  background: var(--signal); color: var(--signal-ink); border-radius: 8px;
  font-size: 10px; padding: 1px 5px; margin-left: 5px;
}

/* ---------- forms ---------- */
input, select, textarea, button {
  font-family: var(--body); font-size: 14px; color: var(--ink);
}
input, select, textarea {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; padding: 7px 9px; max-width: 100%; width: 100%;
}
input[type=checkbox] { width: auto; accent-color: var(--accent); cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label, .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Buttons were styled as `button.btn`, so every <a class="btn"> in the
   app -- "View the bill", "Back", the links out of a panel -- rendered as
   a bare blue browser link. One selector, and they all look like the
   controls they are. */
.btn {
  font-family: var(--body); font-size: 14px; font-weight: 500;
  padding: 9px 15px; border-radius: 4px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1.25;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: none; color: var(--accent); }
.btn.quiet { background: none; color: var(--ink-soft); border-color: var(--rule); }
.btn.quiet:hover { color: var(--ink); border-color: var(--ink-faint); }
.btn.danger { background: none; color: var(--signal); border-color: var(--signal); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.xs, label.xs {
  font-size: 12px; padding: 4px 9px; background: none; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 3px; cursor: pointer;
}
button.xs:hover, label.xs:hover { color: var(--ink); }
button.xs.del, label.xs.del { color: var(--signal); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }

/* ---------- layout blocks ---------- */
h2 { font-family: var(--display); font-weight: 800; font-size: 25px; margin: 26px 0 4px; letter-spacing: -.025em; }
.hint { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 16px; max-width: 72ch; }
.panel { border: 1px solid var(--rule); background: var(--surface); margin-top: 14px; }
.panel-head {
  padding: 12px 17px; border-bottom: 1px solid var(--rule); background: var(--surface-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between;
}
.panel-body { padding: 17px; }

.banner { margin-top: 14px; padding: 11px 14px; font-size: 13.5px; }
.banner.err  { background: var(--signal-dim); border-left: 3px solid var(--signal); color: var(--ink); }
.banner.ok   { background: var(--ok-dim); border-left: 3px solid var(--ok); color: var(--ink-soft); }
.banner.warn { background: var(--amber-dim); border-left: 3px solid var(--amber); color: var(--ink-soft); }

.empty { padding: 38px 20px; text-align: center; color: var(--ink-faint); font-size: 14.5px; border: 1px dashed var(--rule); margin-top: 14px; }

/* ---------- tables ---------- */
.t-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  padding: 0 11px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
td { padding: 9px 11px 9px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
th:last-child, td:last-child { padding-right: 0; }
.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--ink-faint); }
.tiny { font-size: 11.5px; }

/* ---------- pills ---------- */
.pill {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 2px; white-space: nowrap;
}
.s-draft     { background: var(--surface-3); color: var(--ink-soft); }
.s-pending   { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber); }
.s-approved,
.s-running   { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); }
.s-delivered,
.s-closed    { background: var(--ok-dim); color: var(--ok); border: 1px solid var(--ok); }
.s-paid      { background: var(--ok-dim); color: var(--ok); border: 1px solid var(--ok); }
.s-part      { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber); }
.s-overdue   { background: var(--signal-dim); color: var(--signal); border: 1px solid var(--signal); }
.s-open      { background: var(--surface-3); color: var(--ink-soft); }

/* ---------- booking rows ---------- */
/* A grid, not a table: .t-scroll's overflow clipped the autocomplete list. */
.brows { display: flex; flex-direction: column; }
.brow {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(120px, 1fr) 128px 152px auto;
  gap: 11px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
}
.brow:last-child { border-bottom: none; padding-bottom: 2px; }
/* the row with an open dropdown has to sit above the rows under it */
.brow.open { position: relative; z-index: 70; }
.brow .fee { text-align: right; }
.brow .act { display: flex; align-items: center; min-height: 36px; }
.brow .name strong { display: block; line-height: 1.3; }
.brow.bhead {
  padding: 0 0 8px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.brow.bhead + .brow { padding-top: 13px; }
.clbl { display: none; }

@media (max-width: 760px) {
  .brow.bhead { display: none; }
  .brow { grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px 0; }
  .brow .name, .brow .act { grid-column: 1 / -1; }
  .brow .fee { text-align: left; }
  .clbl {
    display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
  }
}

/* ---------- paste a list ---------- */
.paste { border: 1px solid var(--accent); background: var(--surface-2); padding: 16px; margin-top: 14px; }
.paste textarea {
  width: 100%; font-family: var(--mono); font-size: 13px; line-height: 1.7;
  padding: 11px 12px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); resize: vertical;
}
.paste textarea:focus { outline: none; border-color: var(--accent); }
.pv { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; }
.pv-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 11px;
}
.pv-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.4fr) 82px 120px;
  gap: 9px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.pv-row:last-child { border-bottom: none; }
.pv-row.miss { background: var(--amber-dim); margin-inline: -8px; padding-inline: 8px; }
.pv-raw { color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pv-row { grid-template-columns: 1fr 1fr; }
  .pv-raw { grid-column: 1 / -1; }
  .pv-row select { grid-column: 1 / -1; }
}

/* ---------- autocomplete ---------- */
.ac { position: relative; }
.ac-list {
  position: absolute; z-index: 80; left: 0; top: calc(100% + 3px);
  min-width: 100%; width: max-content; max-width: min(460px, 78vw);
  background: var(--surface); border: 1px solid var(--accent);
  max-height: 300px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.ac-item {
  padding: 8px 11px; cursor: pointer; display: flex; gap: 10px;
  align-items: baseline; justify-content: space-between; font-size: 13.5px;
  border-bottom: 1px solid var(--rule-soft);
}
.ac-item:last-child { border-bottom: none; }
.ac-item[aria-selected="true"], .ac-item:hover { background: var(--accent-dim); }
.ac-item .h { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.ac-item .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.ac-empty { padding: 10px 11px; font-size: 13px; color: var(--ink-faint); }

/* ---------- money chain ---------- */
.chain { border: 1px solid var(--rule); background: var(--surface-2); padding: 15px 18px; margin-top: 16px; }
.crow {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; align-items: baseline;
}
.crow:last-child { border-bottom: none; }
.crow .v { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crow.sub { font-size: 13.5px; color: var(--ink-soft); padding-left: 13px; }
.crow.key { border-top: 2px solid var(--ink); margin-top: 3px; padding-top: 10px; font-weight: 600; }
.flag { margin-top: 11px; padding: 10px 13px; font-size: 13.5px; }
.flag.low  { background: var(--signal-dim); border-left: 3px solid var(--signal); color: var(--ink-soft); }
.flag.fine { background: var(--ok-dim); border-left: 3px solid var(--ok); color: var(--ink-soft); }

/* ---------- stage checkboxes ---------- */
.stagecell { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.stagecell label {
  display: flex; gap: 5px; align-items: center; font-size: 12px;
  color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}

/* ---------- login ---------- */
.login { max-width: 360px; margin: 12vh auto 0; }
.login .mark { height: 40px; width: auto; display: block; margin: 0 0 14px; }
.login h1 { font-family: var(--display); font-weight: 800; font-size: 34px; margin: 0 0 6px; letter-spacing: -.03em; }
.login .sub { color: var(--ink-faint); font-size: 14px; margin: 0 0 26px; }
.login .field { margin-bottom: 13px; }

/* ---------- the bill ---------- */

@media print {
  body { background: #fff; padding: 0; }
  .topbar, nav.tabs, .actions, .banner, .no-print { display: none !important; }
  .bill { border: none; padding: 0; max-width: none; }
}

@media (max-width: 620px) {
  .brand h1 { font-size: 21px; }
  .brand .mark { height: 22px; }
  td, th { font-size: 13px; }
}

/* backup */
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- the price, last ---------- */
.price-panel .fields { max-width: 260px; }
.price-panel input { font-size: 17px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sugg {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--accent-dim); border-left: 3px solid var(--accent);
  padding: 13px 15px; margin: 4px 0 16px;
}
.sugg-n {
  font-family: var(--mono); font-size: 23px; font-variant-numeric: tabular-nums;
  color: var(--accent); line-height: 1.15;
}
.sugg-u { font-size: 12px; letter-spacing: .06em; }

/* "add this handle to the roster" row at the foot of the dropdown */
.ac-new {
  padding: 10px 11px; cursor: pointer; font-size: 13px; color: var(--ink-soft);
  border-top: 1px solid var(--rule); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px;
}
.ac-new:hover { background: var(--accent-dim); color: var(--ink); }
.ac-new strong { font-family: var(--mono); color: var(--accent); }

/* ---------- roster: two groups ---------- */
.rosterbar { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
.segs { display: flex; border: 1px solid var(--rule); }
.seg {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  background: var(--surface); border: none; border-right: 1px solid var(--rule);
  color: var(--ink-faint); padding: 9px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.seg:last-child { border-right: none; }
.seg span {
  font-size: 10.5px; background: var(--surface-3); color: var(--ink-soft);
  padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.seg:hover { color: var(--ink); }
.seg[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.seg[aria-current="true"] span { background: rgba(0,0,0,.16); color: var(--accent-ink); }
@media (max-width: 560px) { .segs { width: 100%; } .seg { flex: 1; justify-content: center; } }

/* =====================================================================
   THE BILL
   Colours sampled from the real Maskan/Details PDFs:
     orange #BF5700 · navy labels #1A2E45 · peach #F8EEE5 · row #F7F7F7
   Fixed A4 geometry and literal colours on purpose -- this document must
   look the same on Ahmad's Mac, Marwan's machine and the client's printer,
   so it does NOT follow the app's light/dark tokens.
   ===================================================================== */
.inv {
  --ink: #000; --navy: #1A2E45; --orange: #BF5700; --peach: #F8EEE5; --row: #F7F7F7;
  --latin:  "Red Hat Display", "IBM Plex Sans", system-ui, sans-serif;
  --arabic: "Tajawal", "Red Hat Display", system-ui, sans-serif;
  width: 210mm; max-width: 100%; min-height: 297mm; margin: 18px auto 0;
  background: #fff; color: #000;
  padding: 17mm 15mm 10mm;
  /* Tajawal carries Latin too, but Red Hat Display is what your bills use
     for English, so it leads and Tajawal picks up every Arabic glyph. */
  font-family: var(--latin), "Tajawal";
  box-shadow: 0 2px 20px rgba(0,0,0,.13);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.inv * { color: inherit; }

.inv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.inv-logo { width: 52mm; height: auto; display: block; }
.inv-tag { text-align: right; }
.inv-tag-en {
  display: flex; align-items: stretch; justify-content: flex-end; gap: 3mm;
}
.inv-tag-en span {
  background: var(--orange); color: #fff; font-weight: 700;
  font-size: 26px; letter-spacing: .06em; padding: 3px 16px 5px; line-height: 1.25;
}
.inv-tag-en i { width: 3px; background: var(--orange); display: block; }
.inv-tag-ar {
  font-family: var(--arabic);
  color: var(--orange); font-weight: 900; font-size: 30px; margin-top: 2px;
  letter-spacing: .01em; direction: rtl; line-height: 1.2;
}
.inv-hr { height: 3px; background: var(--peach); margin: 5mm 0 4mm; }

.inv-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; line-height: 1.85; }
.inv-meta b { color: var(--navy); font-weight: 700; }
.inv-meta .m-ar { text-align: right; font-family: var(--arabic); font-size: 14px; }
.inv-meta .m-ar b { font-weight: 700; }

/* The app's own table styles are wrong for a client document -- uppercase
   mono headers and a rule under every row. Overridden, not inherited. */
.inv-tbl { width: 100%; border-collapse: collapse; margin-top: 5mm; font-size: 14px; }
.inv-tbl thead th {
  background: var(--peach); color: var(--navy);
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  text-transform: none; letter-spacing: 0; white-space: normal;
  padding: 10px 12px 11px; text-align: center; line-height: 1.35;
  border-top: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange);
}
.inv-tbl thead th span { font-family: var(--arabic); font-size: 15px; font-weight: 700; }
.inv-tbl td {
  padding: 7px 12px; text-align: center; vertical-align: middle;
  border: none; font-family: var(--sans); font-size: 14.5px;
}
.inv-tbl .c-desc { width: 50%; }
.inv-tbl tbody tr:first-child td { padding-top: 13px; }
/* the free-text band is usually Arabic, so it is set in Tajawal */
.inv-tbl tr.inv-band td {
  font-family: var(--arabic);
  background: var(--row); font-weight: 700; font-size: 16px;
  padding: 12px 14px; line-height: 1.8;
}
.inv-tbl tr.inv-band + tr td { padding-top: 14px; }

.inv-total { display: flex; align-items: stretch; margin-top: 8mm; border-bottom: 1.5px solid #000; }
.inv-total .t-lbl {
  background: var(--orange); color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 14px; width: 50%; text-align: center; line-height: 1.35;
}
.inv-total .t-lbl span { font-family: var(--arabic); font-size: 14.5px; font-weight: 700; }
.inv-total .t-amt {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  border-top: 1.5px solid #000;
}

.inv-mid {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 11mm; margin-bottom: 14mm;   /* keeps the signature clear of the disclaimer */
}
.inv-bank { font-size: 13.5px; line-height: 1.72; }
.inv-bank h4 { color: var(--navy); font-size: 15px; margin: 0 0 3px; font-weight: 700; }
.inv-bank b { color: var(--navy); font-weight: 700; }
.inv-sign { text-align: center; align-self: flex-end; min-width: 46mm; }
.inv-sign span { font-family: var(--arabic); font-size: 14.5px; direction: rtl; }
.inv-sign .sig-line { border-bottom: 1.5px solid var(--orange); margin-top: 6mm; }

.inv-disc {
  background: var(--peach); padding: 10px 14px; font-size: 13px; line-height: 1.6;
  margin-top: auto; color: var(--navy);
}
.inv-disc b { display: block; margin-bottom: 2px; }
.inv-disc ul { margin: 0; padding-left: 16px; }
.inv-disc li { margin-bottom: 2px; }

.inv-foot {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 5mm; font-size: 13px; line-height: 1.6; color: var(--navy);
}
.inv-foot div:last-child { text-align: right; font-family: var(--arabic); font-size: 13.5px; }

#note {
  width: 100%; font-family: var(--sans); font-size: 15px; line-height: 1.6;
  padding: 10px 12px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); resize: vertical;
}
#note:focus { outline: none; border-color: var(--accent); }

@page { size: A4 portrait; margin: 0; }
@media print {
  .topbar, nav.tabs, .no-print, #banner { display: none !important; }
  body { background: #fff; }
  .wrap, #app { padding: 0 !important; max-width: none !important; }
  .inv { margin: 0; box-shadow: none; width: 210mm; min-height: 297mm; page-break-after: avoid; }
}
@media (max-width: 780px) {
  .inv { padding: 10mm 7mm; min-height: 0; }
  .inv-logo { width: 40mm; }
  .inv-tag-en span, .inv-tag-ar { font-size: 20px; }
  .inv-total .t-amt { font-size: 20px; }
  .inv-mid, .inv-foot, .inv-meta { flex-direction: column; }
  .inv-meta .m-ar, .inv-foot div:last-child { text-align: left; }
}

/* =====================================================================
   TODAY  —  the per-person first screen
   ===================================================================== */
.hero { padding-bottom: 4px; }

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px; margin-top: 18px;
}
.tile {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-faint);
  background: var(--surface); padding: 14px 16px; text-decoration: none;
  color: var(--ink); transition: border-color .12s, background .12s;
}
.tile:hover { background: var(--surface-2); }
.tile .t-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.tile .t-value {
  font-family: var(--display); font-size: 30px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tile .t-sub { font-size: 12.5px; color: var(--ink-soft); }
/* urgency is carried by the rail, not by shouting at the whole card */
.tile.urgent { border-left-color: var(--signal); }
.tile.urgent .t-value { color: var(--signal); }
.tile.warn { border-left-color: var(--amber); }
.tile.warn .t-value { color: var(--amber); }
.tile:not(.urgent):not(.warn) { border-left-color: var(--accent); }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0; margin-top: 20px;
  border: 1px solid var(--rule); background: var(--surface);
}
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 17px; border-right: 1px solid var(--rule-soft);
}
.stat:last-child { border-right: none; }
.stat .s-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.stat .s-value {
  font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.stat .s-sub { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 700px) {
  .stat { border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .stat:last-child { border-bottom: none; }
  .tile .t-value { font-size: 25px; }
}

/* ---------- sortable headers ---------- */
thead th { cursor: pointer; user-select: none; position: relative; }
thead th:hover { color: var(--ink); }
thead th:empty, thead th:has(input) { cursor: default; }
thead th[aria-sort]::after {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px;
  vertical-align: middle; opacity: .85;
}
thead th[aria-sort="ascending"]::after {
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 5px solid var(--accent);
}
thead th[aria-sort="descending"]::after {
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 5px solid var(--accent);
}
thead th[aria-sort="ascending"], thead th[aria-sort="descending"] { color: var(--accent); }
.inv thead th { cursor: default; }

/* ---------- the one destructive corner ---------- */
.panel.danger { border-color: var(--signal); }
.panel.danger .panel-head { border-bottom-color: var(--signal); color: var(--signal); }
.btn.del {
  background: none; border: 1px solid var(--signal); color: var(--signal);
}
.btn.del:hover:not(:disabled) { background: var(--signal); color: var(--signal-ink); }
.btn.del:disabled { opacity: .5; cursor: default; }

/* ---------- what a creator is delivering ---------- */
.brow .bc.wide { min-width: 210px; }
.channels { display: flex; flex-direction: column; gap: 3px; }
.chan {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 7px;
  align-items: center; padding: 3px 5px 3px 3px;
  font-size: 13px; color: var(--ink-faint); cursor: pointer;
  border: 1px solid transparent;
}
.chan:hover { color: var(--ink-soft); }
.chan.on { color: var(--ink); border-color: var(--rule-soft); background: var(--surface-2); }
.chan input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.chan .c-name { white-space: nowrap; }
.chan select {
  font-family: var(--mono); font-size: 11.5px; padding: 2px 3px;
  min-height: 0; width: auto; border-color: var(--rule);
}
.chan select:disabled { opacity: .35; }
.chan .c-free {
  font-size: 12.5px; padding: 3px 6px; min-height: 0; width: 100%;
  grid-column: 2 / -1;
}
.chan.other { grid-template-columns: 16px 1fr; row-gap: 4px; }
.chan.other .c-free:disabled { opacity: .35; }

/* ---------- follow-up, one line per piece ---------- */
.fu {
  display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--rule-soft);
}
.fu:first-child { padding-top: 0; }
.fu:last-child { border-bottom: none; padding-bottom: 0; }
.fu.done .fu-who strong { color: var(--ok); }
.fu-pieces { display: flex; flex-direction: column; gap: 7px; }
.piece {
  display: grid; grid-template-columns: minmax(110px, auto) 1fr auto; gap: 9px;
  align-items: center;
  border-left: 3px solid var(--rule); padding-left: 10px;
}
.piece.up { border-left-color: var(--ok); }
.p-tick { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; }
.p-tick input { width: 16px; height: 16px; accent-color: var(--ok); margin: 0; }
.piece.up .p-kind { color: var(--ok); font-weight: 500; }
.p-url { font-size: 12.5px; padding: 5px 8px; min-height: 0; }
.p-shot { white-space: nowrap; }
@media (max-width: 700px) {
  .fu { grid-template-columns: 1fr; gap: 10px; }
  .piece { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- the shared note on a creator ---------- */
.fu { grid-template-columns: minmax(175px, 220px) 1fr minmax(180px, 250px); }
.fu-note { display: flex; flex-direction: column; gap: 5px; }
.fu-note .clbl {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fu-note textarea {
  width: 100%; font-family: var(--body); font-size: 13px; line-height: 1.5;
  padding: 8px 9px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); resize: vertical; min-height: 62px;
}
.fu-note textarea:focus { outline: none; border-color: var(--accent); }
.fu-note textarea:not(:placeholder-shown) { background: var(--amber-dim); border-color: var(--amber); }
.note-by { min-height: 14px; }
@media (max-width: 900px) { .fu { grid-template-columns: 1fr; gap: 12px; } }

/* ---------------------------------------------------------------
   TOP-UP TABS
   A tab is read as a quantity that runs down, so the bar is doing the
   work and the numbers confirm it. Over the line turns the whole row,
   not just the bar -- a tab past its credit is money the company is
   carrying, and it should be impossible to scroll past.
   --------------------------------------------------------------- */
.meter {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; display: block;
}
.meter > span {
  display: block; height: 100%; border-radius: 3px; transition: width .2s ease;
  /* a fill, not text -- so it is the guideline orange at full strength,
     and the ramp gives it depth without inventing a second colour */
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
}
.meter.over > span { background: var(--signal); width: 100% !important; }

.bad  { color: var(--signal); }
.warn { color: var(--amber); }

/* an editable cell inside a table: no box until you are in it, so a
   table of 30 occasions does not read as a form */
input.cell {
  width: 100%; min-width: 90px; padding: 4px 6px; font: inherit;
  color: inherit; background: none; border: 1px solid transparent;
  border-radius: 4px;
}
input.cell:hover  { border-color: var(--rule); }
input.cell:focus  { border-color: var(--accent); background: var(--surface); outline: none; }
input.num, input.cell.num { text-align: right; font-variant-numeric: tabular-nums; }

tfoot th {
  border-top: 1px solid var(--rule); font-weight: 600;
  color: var(--ink); padding-top: 9px;
}

/* the build stamp: present, ignorable, and the first thing to check when
   a change "didn't do anything" */
.build {
  font: 11px/1 var(--mono); color: var(--ink-faint);
  border: 1px solid var(--rule-soft); border-radius: 3px;
  padding: 3px 6px; margin-left: 10px; white-space: nowrap;
}
ul.plain { margin: 10px 0 0; padding-left: 18px; }
ul.plain li { margin: 3px 0; }


/* ---------------------------------------------------------------
   The stepped squares from the guideline. Used once, on the sign-in
   screen, because it is the only page with room for something that is
   there to be looked at rather than read. Everywhere else the identity
   is carried by the type, the colour and the mark -- a tool somebody
   opens forty times a day should not be a brochure.
   --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 14px); gap: 4px; margin: 0 0 20px;
         width: max-content; }
.steps i { display: block; height: 14px; border-radius: 1px; }
.steps i.a { background: var(--brand); }
.steps i.b { background: var(--brand-3); }
.steps i.c { background: var(--brand-4); }
.steps i.x { background: none; }

/* ---------------------------------------------------------------
   POSTS TO COLLECT
   One line per piece of content. The slot says what it is called and
   what proof it wants, because "the reel is up" is not an answer when
   three were bought and only one is.
   --------------------------------------------------------------- */
.pw {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
}
.pw:last-child { border-bottom: 0; }
.pw-note {
  margin-top: 7px; font-size: 12px; color: var(--ink-soft);
  background: var(--surface-2); border-radius: 4px; padding: 6px 8px;
}
.pw-slots { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px;
  padding: 9px 11px; border-radius: 5px; background: var(--surface-2);
}
.slot.up { background: var(--ok-dim); }
.s-tick { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: 0 0 168px; }
.s-name { font-weight: 600; font-size: 13px; }
.s-want {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 2px; padding: 1px 4px;
}
.s-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slot .cell { flex: 1 1 240px; min-width: 160px; background: var(--surface); border-color: var(--rule-soft); }
.s-alt { flex-basis: 100%; font-size: 12px; }
.s-by { flex-basis: 100%; margin-top: -2px; }
.s-by:empty { display: none; }
/* a file input dressed as a button: the label IS the control, so it has
   to look like one or nobody presses it */
label.btn.ghost.xs {
  padding: 5px 11px; font-size: 12px; line-height: 1.3;
  display: inline-flex; align-items: center; cursor: pointer;
}

/* the same label on the campaign's own follow-up panel */
.p-want {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: 5px;
}

@media (max-width: 680px) {
  .pw { grid-template-columns: 1fr; gap: 8px; }
  .slot { grid-template-columns: 1fr; }
  .s-alt, .s-by { grid-column: 1; }
}

/* a micro row with nothing recorded on it yet, on Alali's screen */
tr.owed td { background: var(--amber-dim); }

/* =====================================================================
   THE CLIENT REPORT
   A stack of A4 sections, each one a page, dressed the way your own
   reports are dressed: burnt orange, peach, big numbers, generous white
   space. Like the bill it sets its own colours rather than the app's
   tokens — this is a printed document and it must look identical on a
   phone at midnight and on a laser printer.
   ===================================================================== */
.rep {
  --ink:#14110F; --navy:#1A2E45; --orange:#C15F10; --orange-2:#F08F3C;
  --peach:#FBEEE2; --row:#F8F6F4;
  --latin:"Red Hat Display", system-ui, sans-serif;
  --ar:"Tajawal", system-ui, sans-serif;
  width: 210mm; min-height: 297mm; max-width: 100%;
  margin: 18px auto 0; background: #fff; color: var(--ink);
  padding: 18mm 16mm 14mm; box-sizing: border-box;
  font-family: var(--latin); font-size: 13px; line-height: 1.6;
  box-shadow: 0 2px 20px rgba(0,0,0,.13);
  display: flex; flex-direction: column;
  break-after: page; page-break-after: always;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rep:last-child { break-after: auto; page-break-after: auto; }
.rep * { color: inherit; }

.rep-logo { width: 44mm; height: auto; display: block; }
.rep h1 {
  font-family: var(--latin); font-weight: 900; font-size: 40px;
  letter-spacing: -.02em; margin: 0; color: var(--orange);
}
.rep-h {
  font-family: var(--latin); font-weight: 900; font-size: 22px;
  letter-spacing: -.02em; margin: 0 0 2px; color: var(--navy);
}
.rep-sub { font-size: 12px; color: #6B5D55; margin: 0 0 6mm; }
.rep-p { margin: 0 0 4mm; font-size: 13px; line-height: 1.75; }
.rep-obj { margin: 0 0 4mm; padding-left: 0; list-style: none; }
.rep-obj li { position: relative; padding-left: 16px; margin-bottom: 5px; }
.rep-obj li::before { content: "→"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* cover */
.rep-cover { justify-content: center; text-align: left; gap: 0; }
.rep-cover .rep-logo { margin-bottom: 14mm; }
.rep-cover h1 { font-size: 46px; }
.rc-client { font-size: 26px; font-weight: 700; margin-top: 4mm; color: var(--navy); }
.rc-month  { font-size: 15px; color: var(--orange); font-weight: 700; margin-top: 1mm; letter-spacing: .04em; }
.rc-blurb  { font-size: 13px; color: #6B5D55; max-width: 120mm; margin: 8mm 0 0; line-height: 1.7; }

/* the number tiles */
.rep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.rep-tiles.three { grid-template-columns: repeat(3, 1fr); }
.rt {
  background: var(--peach); border-radius: 4px; padding: 7mm 5mm;
  display: flex; flex-direction: column; gap: 2px; min-height: 30mm;
  justify-content: center;
}
.rt-n { font-size: 27px; font-weight: 900; color: var(--orange); line-height: 1.05; }
.rt-l { font-size: 11px; font-weight: 700; color: var(--navy); letter-spacing: .02em; }
.rt-s { font-size: 9.5px; color: #8A7A6E; line-height: 1.35; }

/* one page-block per piece of content */
.rep-piece { break-inside: avoid; page-break-inside: avoid; margin-bottom: 8mm; }
.rp-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--orange); padding-bottom: 4px; margin-bottom: 5mm;
}
.rp-kind { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.rp-n { font-size: 26px; font-weight: 900; color: var(--orange-2); line-height: 1; }
.rp-body { display: grid; grid-template-columns: 44mm 1fr; gap: 6mm; align-items: start; }
.rp-shot img { width: 100%; height: auto; border-radius: 4px; display: block; border: 1px solid #ECE4DC; }
.rp-shot .noshot, .rep-wall .noshot {
  aspect-ratio: 9/16; border: 1px dashed #D8CCC1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #A99A8D;
}
.rp-people { display: flex; flex-wrap: wrap; gap: 3mm 6mm; margin-bottom: 5mm; }
.rp-p { display: flex; flex-direction: column; line-height: 1.3; }
.rp-p strong { font-size: 12.5px; font-weight: 700; }
.rp-p span { font-size: 11px; color: #8A7A6E; }
.rp-p b { font-size: 10.5px; color: var(--orange); font-weight: 700; }
.rp-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.rp-nums > div { background: var(--row); border-radius: 3px; padding: 4mm 3mm; text-align: center; }
.rp-nums span { display: block; font-size: 17px; font-weight: 900; color: var(--navy); line-height: 1.1; }
.rp-nums i { display: block; font-style: normal; font-size: 9px; color: #8A7A6E; margin-top: 2px; letter-spacing: .03em; }
.rp-link {
  display: inline-block; margin-top: 4mm; font-size: 11.5px; font-weight: 700;
  color: var(--orange); text-decoration: none;
}

/* recap table */
.rep-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.rep-tbl th {
  text-align: left; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8A7A6E; font-weight: 700; padding: 5px 6px; border-bottom: 1.5px solid var(--orange);
}
.rep-tbl th.r, .rep-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.rep-tbl td { padding: 8px 6px; border-bottom: 1px solid #F0EAE4; }
.rep-tbl tfoot th {
  border-bottom: 0; border-top: 1.5px solid var(--orange); font-size: 12px;
  text-transform: none; letter-spacing: 0; color: var(--navy); padding-top: 8px;
}
.rep-tbl a { color: var(--orange); text-decoration: none; font-size: 10.5px; }

/* the stories wall */
.rep-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
.rep-wall figure { margin: 0; }
.rep-wall img { width: 100%; height: auto; border-radius: 4px; display: block; border: 1px solid #ECE4DC; }
.rep-wall figcaption { font-size: 9px; color: #8A7A6E; text-align: center; margin-top: 3px; }

.rep-thanks { justify-content: center; }
.rt-copy { font-size: 14px; color: #6B5D55; max-width: 130mm; margin: 0 0 6mm; line-height: 1.7; }
.rep-foot { margin-top: auto; padding-top: 8mm; font-size: 10.5px; color: #8A7A6E; line-height: 1.7; }

/* the metric boxes on the working screens (not the report) */
.s-nums { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; flex-basis: 100%; }
.num-box { display: flex; flex-direction: column; gap: 2px; }
.num-box > span {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.num-box input {
  width: 74px; padding: 3px 6px; font: inherit; font-size: 12px;
  text-align: right; font-variant-numeric: tabular-nums;
  color: inherit; background: var(--surface);
  border: 1px solid var(--rule-soft); border-radius: 3px;
}
.num-box input:focus { border-color: var(--accent); outline: none; }

@media print {
  .rep { box-shadow: none; margin: 0; width: auto; padding: 12mm 10mm; }
  .rep-cr { break-inside: avoid; }
}


@media print {
  .rep { box-shadow: none; margin: 0; width: auto; min-height: 0; padding: 14mm 12mm; }
  .rep-piece { break-inside: avoid; }
}

/* "this is the same reel as somebody else's" */
select.p-collab, span.p-collab {
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--rule-soft); border-radius: 3px;
  padding: 3px 5px; max-width: 190px;
}
span.p-collab { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------
   THE COLLABORATION
   Declared on the campaign, not reconstructed afterwards: a tick on
   each creator, one number for the group. Six creators making two
   reels is two deliverables, and the box says so before anyone has
   to work it out.
   --------------------------------------------------------------- */
.collab-tick {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 11.5px; color: var(--ink-soft); cursor: pointer;
  border: 1px solid var(--rule-soft); border-radius: 4px; padding: 4px 8px;
}
.collab-tick.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.collab-tick input { margin: 0; }

.collab-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  justify-content: space-between;
  margin-top: 14px; padding: 13px 15px;
  background: var(--accent-dim); border-radius: 5px;
  border-left: 3px solid var(--accent);
}
.cb-l { font-size: 13px; line-height: 1.5; max-width: 62ch; }
.cb-l .muted { display: block; margin-top: 3px; }
.cb-r { display: flex; align-items: center; gap: 9px; }
.cb-r input {
  width: 72px; padding: 7px 9px; font: inherit; font-size: 18px; font-weight: 700;
  text-align: center; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 4px;
}
.cb-r input:focus { border-color: var(--accent); outline: none; }
.cb-u { font-size: 12px; color: var(--ink-soft); }

/* and its line on the bill */
.inv-collab td { font-weight: 700; border-top: 1px solid var(--peach); }
.inv-collab span { display: block; font-weight: 400; font-size: 12px; color: #666; }

/* where a campaign actually stands */
.pill.s-warn  { color: var(--amber);  border-color: var(--amber);  background: var(--amber-dim); }
.pill.s-bad   { color: var(--signal); border-color: var(--signal); background: var(--signal-dim); }
.pill.s-ok    { color: var(--ok);     border-color: var(--ok);     background: var(--ok-dim); }
.pill.s-micro { color: var(--ink-soft); border-color: var(--rule); background: var(--surface-2); }

/* ---------------------------------------------------------------
   LOOSE ENDS
   One question per row, one box per question. The box is as wide as
   the answer and no wider, because a 40-character field for a 6-digit
   invoice number reads as though something longer is wanted.
   --------------------------------------------------------------- */
table.loose td { vertical-align: top; padding: 10px 12px 10px 0; }
table.loose tr + tr td { border-top: 1px solid var(--rule-soft); }
.l-what  { width: 60%; }
.l-when  { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
           color: var(--ink-soft); padding-right: 18px !important; }
.l-fix   { white-space: nowrap; text-align: right; }
.l-in {
  width: 190px; padding: 7px 10px; margin-right: 8px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-family: var(--mono);
}
.l-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.l-in:disabled { background: var(--surface-2); color: var(--ink-faint); }
/* answered, not gone: you can see the one you just did was the one you meant */
tr.l-done { opacity: .45; }
tr.l-done .l-fix { font-family: var(--mono); }
@media (max-width: 720px) {
  .l-what { width: auto; }
  .l-in   { width: 130px; }
}
/* This one has no heading row, so the card rule below cannot reach it. On a
   phone the three cells stack instead: the question, when it is from, then the
   box to answer it — full width, because that is the thing you came to do. */
@media (max-width: 640px) {
  table.loose, table.loose tbody, table.loose tr, table.loose td { display: block; width: auto; }
  table.loose tr {
    border: 1px solid var(--rule-soft); border-radius: 8px;
    padding: 11px 13px; margin-bottom: 9px; background: var(--surface);
  }
  table.loose tr + tr td { border-top: 0; }
  table.loose td { padding: 2px 0; }
  .l-what { font-weight: 600; }
  .l-when { text-align: left; padding-right: 0 !important; font-size: 12px; }
  .l-fix  { text-align: left; display: flex !important; gap: 8px; margin-top: 7px; }
  .l-in   { width: auto; flex: 1; margin-right: 0; }
}

/* ---------------------------------------------------------------
   REPORT CHARTS
   Inside .rep, which is a white page by definition and prints, so
   these commit to one look rather than answering to the theme.
   No y-axis and no gridlines: with a dozen bars at most and the
   number printed on each, an axis is a third way of saying what
   the height and the label already say.
   --------------------------------------------------------------- */
.rep-chart { margin: 0 0 8mm; break-inside: avoid; page-break-inside: avoid; }
.rep-chart figcaption {
  font-size: 12px; font-weight: 800; color: var(--navy);
  letter-spacing: .01em; margin-bottom: 2mm;
}
.rep-chart figcaption span {
  display: block; font-weight: 500; font-size: 9.5px; color: #8A7A6E; letter-spacing: 0;
}
.rep-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.bc-base { stroke: #E4DCD4; stroke-width: 1; }
.bc-bar  { fill: var(--orange); }
/* nothing measured yet is not a zero result: a flat marker, not a bar */
.bc-none { fill: #E4DCD4; }
.bc-val  { fill: var(--ink); font-size: 13px; font-weight: 800; text-anchor: middle; }
.bc-lab  { fill: #8A7A6E; font-size: 12px; font-weight: 700; text-anchor: middle; }

/* ---------------------------------------------------------------
   TOP PERFORMING REEL
   --------------------------------------------------------------- */
.rep-best { display: grid; grid-template-columns: 52mm 1fr; gap: 6mm; align-items: start; }
.rb-shot img, .rb-shot .noshot {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 4px; background: var(--row); display: block;
}
.rb-shot .noshot {
  display: flex; align-items: center; justify-content: center;
  color: #B5A79B; font-size: 10px;
}
.rb-n   { font-size: 21px; font-weight: 900; color: var(--orange); line-height: 1.1; }
.rb-who { margin: 1mm 0 4mm; display: flex; flex-wrap: wrap; gap: 2mm; }
.rb-who span {
  font-size: 10px; font-weight: 700; color: var(--navy);
  background: var(--peach); border-radius: 3px; padding: 1mm 2mm;
}
.rb-tiles { grid-template-columns: repeat(3, 1fr); }
.rb-tiles .rt { min-height: 20mm; padding: 4mm 3.5mm; }
.rb-tiles .rt-n { font-size: 18px; }
.rb-tiles .rt-l { font-size: 9.5px; }
.rb-link {
  display: inline-block; margin-top: 4mm; font-size: 11px; font-weight: 700;
  color: var(--orange); text-decoration: none; border-bottom: 1px solid var(--orange-2);
}
@media (max-width: 700px) { .rep-best { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   THE REPORT WINDOW
   Waiting is the normal state and must not look like a warning:
   nothing is wrong with a campaign whose views are still settling.
   --------------------------------------------------------------- */
.rp { margin-top: 16px; }
.rp-wait .panel-head { border-left: 3px solid var(--rule); }
.rp-open .panel-head { border-left: 3px solid var(--accent); }
/* on a slot whose campaign has not come round yet: a line, not four boxes */
.s-wait {
  margin-top: 8px; padding: 6px 9px; border-radius: 5px;
  background: var(--surface-2); color: var(--ink-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
}

/* ---------------------------------------------------------------
   MICRO CAMPAIGN REPORT
   The headline page is one number. On the reports you have sent it
   fills the page, because on a micro campaign the number IS the
   result — there is nothing else true to say about a story that was
   up for a day.
   --------------------------------------------------------------- */
.rep-count { align-items: center; justify-content: center; text-align: center; }
.mr-n {
  font-family: var(--latin); font-weight: 900; font-size: 116px; line-height: .9;
  color: var(--orange); letter-spacing: -.03em;
}
.mr-u {
  font-family: var(--latin); font-weight: 900; font-size: 30px;
  color: var(--navy); letter-spacing: .02em; margin-top: 3mm;
}
.mr-s {
  font-family: var(--latin); font-weight: 700; font-size: 15px;
  color: #8A7A6E; letter-spacing: .22em; margin-top: 3mm;
}
/* a link with no screenshot: named, not faked */
.rep-wall .noshot {
  width: 100%; aspect-ratio: 9 / 16; border-radius: 4px;
  background: var(--row); border: 1px solid #ECE4DC;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 3mm; box-sizing: border-box;
  color: #B5A79B; font-size: 8.5px; line-height: 1.4;
}
.mr-page {
  margin-top: auto; padding-top: 6mm; text-align: right;
  font-size: 9.5px; color: #B5A79B; letter-spacing: .08em;
}

/* ---------------------------------------------------------------
   PERSONAL BOOKS
   A different product, so it is allowed to look calmer than the
   agency screens — there is no margin floor here and nothing is
   overdue to anybody but the person reading it.
   --------------------------------------------------------------- */
.pstats { margin-top: 18px; }
.p-acts { white-space: nowrap; }
.p-acts > * { margin-left: 4px; }
.p-acts > *:first-child { margin-left: 0; }
tr.p-edit input { width: 100%; padding: 5px 7px; font: inherit; font-size: 12px;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); color: var(--ink); }
tr.p-edit input.num { text-align: right; font-family: var(--mono); }



/* the creator's one switch, and the Owner's team list */
.wteam .panel-head { border-left: 3px solid var(--rule); }
.wteam.on .panel-head { border-left-color: var(--accent); }
.wtoggle { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.wtoggle input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.wtoggle > span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.wtoggle > span strong { color: var(--ink); }
.wtoggle.inline { align-items: center; justify-content: flex-end; white-space: nowrap; }
.wtoggle.inline > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; }

/* a bill the creator has handed to the team */
.xs.on { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* the two knobs on the Owner's wallet table */
.mini { padding: 3px 6px; font: inherit; font-size: 11.5px; font-family: var(--mono);
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper);
  color: var(--ink); width: 76px; }

/* ---------------------------------------------------------------
   A CREATOR'S OWN INVOICE
   Driven entirely by --wb, the creator's colour, so the same markup
   prints as OMARMEDIA's document for one creator and somebody
   else's for the next. English left, Arabic right, the way his
   printed ones read.
   --------------------------------------------------------------- */
.wb { --wb: #1D3049; padding: 19mm 16mm 14mm; font-size: 12.5px;
  /* the report sheet sets a mono face on table headers; a creator's invoice
     is their own document and uses their type all the way through */
  font-family: var(--latin); }
.wb th, .wb td, .wb-title, .wb-bank { font-family: var(--latin); letter-spacing: 0; }
.wb-logo { width: 96mm; height: auto; display: block; margin-bottom: 2mm; }
.wb-word { font-size: 26px; font-weight: 900; color: var(--wb); margin-bottom: 4mm; }

.wb-title {
  text-align: center; font-weight: 900; font-size: 31px; letter-spacing: .05em;
  color: var(--wb); margin: 13mm 0 8mm;
}
.wb-title span {
  display: block; font-size: 17px; letter-spacing: 0; margin-top: 1mm;
  font-family: var(--ar); border-bottom: 2px solid var(--wb);
  width: fit-content; margin-inline: auto; padding-bottom: 1mm;
}

.wb-meta { margin-bottom: 4.5mm; }
.wb-row { display: flex; justify-content: space-between; gap: 8mm;
  padding: .45mm 0; line-height: 1.45; }
.wb-row > div { min-width: 0; }
.wb-en { color: #222; }
.wb-them .wb-row:first-child .wb-en,
.wb-them .wb-row:first-child .wb-ar { color: #2AA3D6; font-weight: 700; }
.wb-k { font-weight: 800; color: var(--wb); }
.wb-ar { font-family: var(--ar); text-align: right; color: #222; }
.wb-them .wb-row:first-child { color: #2AA3D6; font-weight: 700; margin-bottom: 1mm; }

.wb-tbl { width: 100%; border-collapse: collapse; margin-top: 1mm; table-layout: fixed; }
.wb-tbl th:first-child, .wb-tbl td:first-child { width: 52%; }
.wb-tbl th:not(:first-child), .wb-tbl td:not(:first-child) { width: 16%; }
.wb-tbl thead th {
  background: var(--wb); color: #fff; padding: 2.6mm 3mm; font-size: 11.5px;
  font-weight: 800; text-align: center; text-transform: none; line-height: 1.35;
}
.wb-tbl thead th:first-child { text-align: center; }
.wb-tbl thead th span { display: block; font-family: var(--ar); font-weight: 700; }
.wb-tbl tbody td { padding: 3.4mm; border-bottom: 1px solid var(--wb); text-align: center; }
.wb-tbl tbody td:first-child { text-align: center; }
/* the empty rules his printed template carries */
.wb-blank td { height: 11mm; }
.wb-note { font-size: 10px; color: #7B7B7B; margin-top: 1mm; }
.wb-tbl tfoot th {
  padding: 4mm; border-bottom: 1px solid var(--wb); font-size: 13px; font-weight: 800;
  text-align: center;
}
.wb-tbl tfoot th span { font-family: var(--ar); margin-inline-start: 2mm; }

.wb-bank { margin-top: 7mm; line-height: 1.62; color: #222; }
.wb-bank strong { display: block; color: var(--wb); margin-bottom: 1.5mm; }
.wb-paid {
  margin-top: 7mm; display: inline-block; padding: 2.5mm 5mm; border-radius: 3px;
  background: #E5EFE9; color: #2E6B4E; font-weight: 900; letter-spacing: .1em; font-size: 12px;
}
.wb-stamp {
  position: absolute; right: 24mm; bottom: 14mm; width: 31mm; height: auto;
  opacity: .92; pointer-events: none;
}
.wb { position: relative; }
/* These once reflowed the sheet on a narrow screen. The sheet is scaled to fit
   now instead, so reflowing would only make the preview stop matching the PDF
   it is a preview of. Left here, struck out, so the next person does not
   helpfully put them back. */
/* @media (max-width: 720px) { .wb-row { flex-direction: column; gap: 0; }
                               .wb-ar { text-align: left; } } */

/* the Owner's template editor, one creator at a time */
.tmpl { border: 1px solid var(--rule); border-radius: 7px; margin-bottom: 9px; overflow: hidden; }
.tmpl.open { border-color: var(--accent); }
.tmpl-head {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; cursor: pointer;
  background: var(--surface-2);
}
.tmpl-head:hover { background: var(--surface-3); }
.tmpl-head img { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
.tmpl-head > div { flex: 1; }
.tmpl-no {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint);
  border: 1px dashed var(--rule); border-radius: 4px; padding: 5px 9px;
}
.tmpl-body { padding: 15px; border-top: 1px solid var(--rule); }
.tmpl-body textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 12px; font-family: var(--mono);
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
  color: var(--ink); resize: vertical; line-height: 1.6;
}

/* the English line under an Arabic description, the way a bilingual bill
   carries both without one crowding the other */

/* the service picker on the new-bill form */
.svc { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-b {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 7px; padding: 7px 10px;
  background: var(--paper); font-size: 12.5px;
}
.svc-b:hover { border-color: var(--rule-strong, var(--accent)); }
.svc-b input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.svc-b:has(input[type=checkbox]:checked) { border-color: var(--accent); background: var(--accent-dim); }
.svc-n {
  width: 44px; padding: 2px 5px; font: inherit; font-size: 12px; font-family: var(--mono);
  border: 1px solid var(--rule); border-radius: 5px; background: var(--surface);
  color: var(--ink); text-align: center;
}
.svc-b:not(:has(input[type=checkbox]:checked)) .svc-n { opacity: .35; }

/* ---------------------------------------------------------------
   THE BAND SHEET  (Yousef)
   Black bands top and bottom that run to the paper edge, a grey card
   for the three facts, a totals block, a signature rule. Nothing here
   is shared with the classic sheet but the page size.
   --------------------------------------------------------------- */
.bs {
  --bs: #141414;
  /* Every tone on this sheet is the creator's own colour, thinned. Yousef's
     accent is near-black so his page comes out in greys; Omar's is navy so the
     same sheet comes out in navy. One layout, no per-creator colour list.
     The plain values above each mix are what an older browser gets. */
  /* Ink is the accent pulled most of the way down to near-black, so a dark
     accent stays itself and a bright one (Ahmad's rust) does not end up as
     body text shouting off the page. Every other text tone is then that ink
     thinned with white -- one family, whatever colour goes in. */
  --bs-ink:    #1A1A1A;  --bs-ink:    color-mix(in srgb, var(--bs) 45%, #1A1A1A);
  --bs-strong: #333;     --bs-strong: color-mix(in srgb, var(--bs-ink) 92%, #fff);
  --bs-mid:    #5A5A5A;  --bs-mid:    color-mix(in srgb, var(--bs-ink) 85%, #fff);
  --bs-soft:   #3A3A3A;  --bs-soft:   color-mix(in srgb, var(--bs-ink) 80%, #fff);
  --bs-faint:  #6A6A6A;  --bs-faint:  color-mix(in srgb, var(--bs-ink) 54%, #fff);
  --bs-line:   #9A9A9A;  --bs-line:   color-mix(in srgb, var(--bs) 43%, #fff);
  --bs-rule:   #DADADA;  --bs-rule:   color-mix(in srgb, var(--bs) 16%, #fff);
  --bs-hair:   #E4E4E4;  --bs-hair:   color-mix(in srgb, var(--bs) 13%, #fff);
  --bs-wash:   #F2F2F2;  --bs-wash:   color-mix(in srgb, var(--bs) 6%,  #fff);
  --bs-on:     #C6C6C6;  --bs-on:     color-mix(in srgb, #fff 72%, var(--bs));
  --bs-onlow:  #9A9A9A;  --bs-onlow:  color-mix(in srgb, #fff 58%, var(--bs));
  /* what sits ON the coloured bands, and what a label is painted in */
  --on-bs: #fff;
  --bs-label: var(--bs);
  padding: 0; font-family: var(--latin); font-size: 12px; color: var(--bs-ink);
}
.bs th, .bs td, .bs strong, .bs b { font-family: var(--latin); }
.bs * { letter-spacing: 0; }

.bs-hero { background: var(--bs); color: var(--on-bs); padding: 15.5mm 16mm 10.5mm; text-align: center; }
.bs-inv { font-size: 72px; font-weight: 800; line-height: 1.05;
  letter-spacing: .19em; text-indent: .19em; }
.bs-rule { width: 56mm; height: 2px; background: currentColor; margin: 2.5mm auto 2.5mm; }
.bs-who { font-size: 12px; font-weight: 600; color: var(--bs-on);
  letter-spacing: .42em; text-indent: .42em; }

.bs-body { padding: 10mm 16mm 5mm; flex: 1; display: flex; flex-direction: column; }

/* the three facts, English left, Arabic right, inside one grey card */
.bs-card { background: var(--bs-wash); border-left: 5px solid var(--bs); padding: 4.5mm 7mm; }
.bs-row { display: grid; grid-template-columns: 30mm 1fr auto; gap: 6mm;
  align-items: baseline; padding: .5mm 0; }
.bs-k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--bs-label); }
.bs-v { font-size: 13px; color: var(--bs-strong); }
.bs-va { font-family: var(--ar); font-size: 11.5px; color: var(--bs-strong); text-align: right; }
.bs-va b { font-weight: 700; color: var(--bs-label); }

.bs-me { display: flex; justify-content: space-between; gap: 10mm;
  align-items: flex-start; margin: 8.5mm 0 0; padding-bottom: 7mm;
  border-bottom: 1px solid var(--bs-rule); }
.bs-name { font-size: 19px; font-weight: 800; }
.bs-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--bs-faint);
  margin-top: 1mm; white-space: pre-wrap; }
.bs-contact { text-align: right; font-size: 11.5px; color: var(--bs-mid); line-height: 1.85; }
/* the spacing around his dots is deliberate, so keep the runs of spaces --
   but only inside the lines themselves, never around them. */
.bs-contact > div { white-space: pre-wrap; }

.bs-tbl { width: 100%; border-collapse: collapse; margin-top: 7.5mm;
  table-layout: fixed; }
.bs-tbl th:nth-child(1), .bs-tbl td:nth-child(1) { width: 67%; }
.bs-tbl th:nth-child(2), .bs-tbl td:nth-child(2) { width: 12%; }
.bs-tbl th:nth-child(3), .bs-tbl td:nth-child(3) { width: 21%; }
.bs-tbl thead th {
  background: var(--bs); color: var(--on-bs); padding: 4.2mm 6.5mm; font-size: 10px;
  font-weight: 800; letter-spacing: .16em; text-align: left; text-transform: none;
}
.bs-tbl thead th.c { text-align: center; }
.bs-tbl thead th.r { text-align: right; }
.bs-tbl td { padding: 5mm 6.5mm; border-bottom: 1px solid var(--bs-hair); font-size: 12.5px; line-height: 1.5; }
.bs-tbl td.c { text-align: center; }
.bs-tbl td.r { text-align: right; font-size: 14px; }
.bs-note { font-size: 10.5px; color: var(--bs-faint); margin-top: 1mm; }

.bs-sums { margin-top: 12mm; margin-left: 47%; }
.bs-sub { display: flex; justify-content: space-between; gap: 8mm;
  padding: 0 6.5mm 4mm; font-size: 12.5px; color: var(--bs-soft); }
.bs-total {
  display: flex; justify-content: space-between; gap: 8mm; align-items: baseline;
  background: var(--bs); color: var(--on-bs); padding: 5mm 6.5mm;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
}
.bs-total strong { font-size: 19px; letter-spacing: 0; }
.bs-paid {
  margin-top: 5mm; display: inline-block; padding: 2.5mm 5mm;
  background: #E5EFE9; color: #2E6B4E; font-weight: 800; letter-spacing: .1em; font-size: 11px;
}

.bs-foot { display: flex; justify-content: space-between; gap: 14mm;
  margin-top: auto; padding-top: 7mm; border-top: 2px solid var(--bs); }
.bs-h { font-size: 11px; font-weight: 800; letter-spacing: .16em; margin-bottom: 2.2mm;
  color: var(--bs-label); }
.bs-bank table { border-collapse: collapse; }
.bs-bank table { width: auto; }
.bs-bank th, .bs-bank td { border: 0; letter-spacing: 0; text-transform: none; }
.bs-bank th { text-align: left; font-weight: 700; font-size: 11px; color: var(--bs-label);
  padding: .55mm 11mm .55mm 0; white-space: nowrap; }
.bs-bank td { font-size: 11px; color: var(--bs-mid); padding: .55mm 0; }
.bs-bnote { font-size: 11px; color: var(--bs-mid); margin-top: 3.5mm; line-height: 1.6;
  text-align: left; }
.bs-sign { text-align: center; min-width: 58mm; }
.bs-sign img { width: 26mm; height: auto; display: block; margin: 0 auto 1mm; }
.bs-gap { height: 13mm; }
.bs-line { border-bottom: 1px solid var(--bs-line); margin-bottom: 2.5mm; }
.bs-signer { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--bs-faint); }

.bs-band {
  margin-top: auto; background: var(--bs); color: var(--bs-onlow); text-align: center;
  padding: 3.8mm 16mm; font-size: 10px; font-weight: 600; letter-spacing: .22em;
}
/* Same as the classic sheet above: the page is scaled, not reflowed, so what
   you see on a phone is the document that prints. */
/* @media (max-width: 720px) { .bs-row { grid-template-columns: 1fr; gap: 0; }
     .bs-va { text-align: left; } .bs-me, .bs-foot { flex-direction: column; }
     .bs-contact { text-align: left; } .bs-sums { margin-left: 0; } } */

/* ==========================================================================
   ON A PHONE
   --------------------------------------------------------------------------
   Everything below here only applies below 640px. Three things had to change
   to make the site usable one-handed:

   1. the tab strip wrapped onto five rows and ate a third of the screen. It
      is now one row that scrolls sideways, with the current tab scrolled into
      view, so the chrome costs 40px instead of 340.
   2. the header said the company name next to a logo that already says it.
   3. a table with eight columns cannot be a table at 390px. Each row becomes
      a card and each cell carries its column's name, so the money is on screen
      instead of two swipes to the right. The print sheets are left alone --
      an invoice is an A4 page whatever you are holding.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- the header ---- */
  .topbar { gap: 8px 12px; }
  .brand .sub { display: none; }
  .brand .build { font-size: 9px; }
  .whoami { font-size: 13px; }

  /* ---- the tabs ---- */
  nav.tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -18px; padding-inline: 18px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs a { white-space: nowrap; flex: 0 0 auto; scroll-snap-align: start; }

  /* ---- tables become cards ---- */
  /* a table that became cards has nothing left to scroll sideways; one that
     did not (no heading row to label from) keeps its scroller */
  .t-scroll:has(table.cardable) { overflow-x: visible; }
  table.cardable { display: block; width: 100%; }
  table.cardable thead { display: none; }
  table.cardable tbody, table.cardable tfoot { display: block; }
  table.cardable tr {
    display: block; background: var(--surface);
    border: 1px solid var(--rule-soft); border-radius: 8px;
    padding: 10px 13px; margin-bottom: 9px;
  }
  table.cardable td, table.cardable tfoot th {
    display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
    width: auto; padding: 4px 0; border: 0; text-align: right; white-space: normal;
  }
  /* the column's own name, in front of its value */
  table.cardable td[data-label]::before, table.cardable tfoot th[data-label]::before {
    content: attr(data-label);
    flex: 0 1 auto; text-align: left; white-space: nowrap;
    font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  }
  /* a cell with nothing in it is noise on a card */
  table.cardable td:empty { display: none; }
  /* a cell holding more than one thing -- a name and its title, a state and
     its due date -- stacks them under the label instead of spreading all
     three across one line */
  /* Two things in one cell -- a client and the campaign's title, a state and
     the date it is due. The first sits on the label's line; the rest drop
     underneath it rather than costing a line of their own for the label. */
  table.cardable td:has(> * + *),
  table.cardable td:has(> br) { flex-wrap: wrap; row-gap: 1px; }
  table.cardable td:has(> * + *) > :not(:first-child),
  table.cardable td:has(> br) > :not(:first-child) { flex-basis: 100%; text-align: right; }
  /* a <br> is a flex item of its own, and an invisible one 17px tall. The
     column above already puts each part on its own line. */
  table.cardable td br { display: none; }
  table.cardable td > * { text-align: right; }
  table.cardable td select, table.cardable td input, table.cardable td textarea { width: auto; max-width: 62%; }
  table.cardable tr.clickable:hover td { background: transparent; }

  /* ---- odds and ends that were laid out for a desk ---- */
  .fields { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
  .panel-head { flex-wrap: wrap; gap: 4px 10px; }
}

/* ---- the printed sheets on a phone ----
   An invoice is an A4 page: 210mm of fixed millimetre paddings and type sized
   for paper. It cannot reflow into a phone without stopping being the document
   the client receives, so instead the whole page is scaled down to fit — the
   same thing a PDF viewer does. Print is untouched: this is screen only. */
@media screen and (max-width: 840px) { .rep, .wb, .bs { zoom: .86; } }
@media screen and (max-width: 740px) { .rep, .wb, .bs { zoom: .74; } }
@media screen and (max-width: 640px) { .rep, .wb, .bs { zoom: .63; } }
@media screen and (max-width: 540px) { .rep, .wb, .bs { zoom: .53; } }
@media screen and (max-width: 440px) { .rep, .wb, .bs { zoom: .42; } }
@media screen and (max-width: 380px) { .rep, .wb, .bs { zoom: .36; } }

/* ==========================================================================
   SEENER
   ========================================================================== */
.sn-log {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--surface);
  padding: 14px; margin-top: 14px; max-height: 52vh; overflow-y: auto;
}
.sn-empty { color: var(--ink-soft); font-size: 14px; line-height: 2.1; }
.sn-empty strong { display: block; margin-bottom: 6px; }
.sn-eg { margin-right: 6px; text-align: left; }
.sn-turn { margin-bottom: 15px; }
.sn-turn:last-child { margin-bottom: 0; }
.sn-who {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.sn-said { line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.sn-user .sn-said { color: var(--ink); font-weight: 500; }
.sn-bot .sn-said { color: var(--ink-soft); }
.sn-heard {
  margin-top: 5px; font-size: 11.5px; color: var(--ink-faint);
  border-left: 2px solid var(--rule); padding-left: 8px;
}
.sn-note {
  font-size: 12.5px; color: var(--ink-faint); font-style: italic;
  padding: 7px 0; border-top: 1px dashed var(--rule-soft); margin-bottom: 12px;
}

/* a change, before it is a change */
.sn-ask {
  margin-top: 13px; padding: 15px 17px; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent-dim);
}
.sn-ask-what { font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.sn-ask-note {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin: 7px 0 11px;
}

.sn-box { margin-top: 13px; }
.sn-box textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; line-height: 1.5;
  border: 1px solid var(--rule); border-radius: 9px;
  background: var(--surface); color: var(--ink); resize: vertical;
}
.sn-box textarea:focus { outline: none; border-color: var(--accent); }
.sn-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
#snmic { touch-action: none; user-select: none; }

@media (max-width: 640px) {
  .sn-log { max-height: 44vh; }
  .sn-tools .btn { flex: 1 1 auto; }
  .sn-eg { display: block; width: 100%; margin: 0 0 6px; }
}

/* ---- the SEENER line, under the tabs on every screen ---- */
.snbar { margin-top: 12px; }
.snbar-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); padding: 5px 6px 5px 12px;
}
.snbar-row:focus-within { border-color: var(--accent); }
.snbar-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--accent); font-weight: 700; flex: 0 0 auto;
}
.snbar-row input {
  flex: 1; min-width: 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: 14.5px; padding: 6px 2px;
}
.snbar-row input:focus { outline: none; }
.snbar-btn {
  flex: 0 0 auto; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-soft); border-radius: 7px; padding: 6px 10px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.snbar-btn:hover { border-color: var(--accent); color: var(--ink); }
.snbar-btn.go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.snbar-btn.live { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#snbarmic { touch-action: none; user-select: none; }

.snbar-drop {
  margin-top: 8px; padding: 13px 15px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); max-height: 46vh; overflow-y: auto;
}
.snbar-drop[hidden] { display: none; }
.snbar-foot {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule-soft);
  font-size: 12px; color: var(--ink-faint);
}
.snbar-foot a { color: var(--accent); }

@media (max-width: 640px) {
  .snbar-tag { display: none; }
  .snbar-row { padding-left: 10px; }
  .snbar-row input { font-size: 16px; }   /* 16px or iOS zooms the page on focus */
  .snbar-drop { max-height: 40vh; }
}


/* A pale accent -- Sulaiman's yellow -- turns the bands the other way up: dark
   type on colour, and labels in ink rather than in the accent, which at that
   lightness would be unreadable on paper. The trigger is the colour's own
   luminance, measured where the sheet is built, so nothing here is per-creator. */
.bs-pale {
  --on-bs: #1A1A1A;
  --on-bs: color-mix(in srgb, var(--bs) 16%, #141414);
  --bs-ink: color-mix(in srgb, var(--bs) 22%, #141414);
  --bs-label: var(--bs-ink);
}
.bs-pale .bs-who   { color: color-mix(in srgb, var(--on-bs) 72%, var(--bs)); }
.bs-pale .bs-band  { color: color-mix(in srgb, var(--on-bs) 62%, var(--bs)); }
.bs-pale .bs-total strong { color: var(--on-bs); }

/* the colour a creator's whole bill is built from */
.swatch {
  width: 100%; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--surface);
}