/* Black Ops · כספים
 *
 * Direction: a system app, not a dashboard template. Light by default with a real dark
 * mode, hierarchy carried by type and spacing instead of a border around everything,
 * hairline separators inset from the leading edge, and colour only where it means
 * something. The amber is the one brand mark and appears about four times a screen.
 *
 * What this replaces: dark slate cards, an outline on every box, and an accent sprayed
 * across the page. That is the default a machine reaches for, and it looked like it.
 */

:root{
  /* One look, on purpose. blackops.co.il/portal is light and has no dark mode; Guy
     pointed at it and asked for its colours. A dark mode here was mine, and on his
     device it was what he saw instead of what he asked for. color-scheme is pinned so
     form controls and scrollbars stay light too. */
  color-scheme:light;

  /* Measured off blackops.co.il/portal, by painted area rather than by eye. Guy pointed
     at the portal and said: the type is right, I want these colours. So these are its
     colours, not an interpretation of them. Flat white cards with a hairline border and
     no shadow at all, which is how that page is built. */
  --bg:#F0F2F5;               /* the portal's ground, 8.4M px² of it */
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --sep:#DADDE1;              /* its card border, 1px, on 5 of 6 cards */

  --ink:#050505;
  --ink-2:#65676B;
  --ink-3:#8A8D91;

  --accent:#7A5E00;           /* its most used text colour by a long way */
  --accent-fill:#FFD542;      /* its filled highlight */
  --accent-on-fill:#050505;   /* yellow takes dark text, never white */
  --accent-soft:rgba(255,213,66,.22);
  --good:#3D8B5F;
  --bad:#F56C6C;              /* its alert colour, for fills and large figures */
  --bad-ink:#C0392F;          /* darkened for small text, where F56C6C is 3:1 on white */
  --bad-soft:rgba(245,108,108,.13);

  --shadow:none;
  --shadow-sm:none;
  --ring:1px solid var(--sep);

  --r:8px;
  --r-sm:8px;
  --gut:clamp(1rem,5vw,1.75rem);

  --sans:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --num:-apple-system,BlinkMacSystemFont,"Assistant",system-ui,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  direction:rtl;margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.47;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance;letter-spacing:-.022em}
p{margin:0}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;letter-spacing:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}

/* digits read left to right and line up in a column; a currency sign written before them
   lands on a different side in Hebrew prose than in a block, so it always goes after */
/* Two ways to isolate a numeral run, and which one you need depends on whether it sits
   INSIDE a sentence or stands on its own line.

   .ltr is for a run inside Hebrew text: it forces direction:ltr so the digits cannot be
   reordered by what surrounds them.

   .num is for a figure that stands alone above its own caption. It isolates the digits
   and leaves the block's direction alone, because direction:ltr on a BLOCK also decides
   where its text sits: every one of the eight tiles on the panel had its number 22px from
   the edge its own label started at, and on the handoff lines the gap reached 258px. The
   digits are strong-LTR anyway, so they render left to right without being told to. */
.ltr{display:inline-block;direction:ltr;unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.num{unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.wrap{max-width:46rem;margin:0 auto;padding-inline:var(--gut);padding-block:1rem 5rem}

/* ---------------------------------------------------------------- chrome */

.mode{font-size:.8125rem;line-height:1.45;padding:.7rem .95rem;border-radius:var(--r-sm);
  margin-bottom:1.25rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline}
.mode.demo{background:var(--bad-soft);color:var(--ink)}
.mode.demo b{color:var(--bad-ink);font-weight:700}
.mode.live{background:var(--surface);color:var(--ink-2);border:var(--ring)}

.head{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:1.25rem}
.mk{font-size:1.0625rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.mk i{color:var(--accent);font-style:normal}
.mk span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);
  letter-spacing:-.01em;margin-top:.15rem}
.fresh{font-size:.8125rem;color:var(--ink-3);text-align:left;line-height:1.45}
.fresh b{color:var(--ink-2);font-weight:600}
.fresh.stale b{color:var(--bad-ink)}
.dot{display:inline-block;width:.4375rem;height:.4375rem;border-radius:50%;
  background:var(--good);margin-inline-end:.4rem;vertical-align:.05em}
.dot.bad{background:var(--bad)}
.who-am-i{color:var(--ink-3);font-size:.75rem}
.linkish{appearance:none;background:none;border:0;color:var(--accent);cursor:pointer;
  font-size:.75rem;font-weight:600;padding:0;margin-inline-start:.5rem}

/* a segmented control: one track, one filled pill */
.seg{display:inline-flex;background:var(--sep);border-radius:9px;padding:2px;gap:2px}
.seg button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--ink-2);padding:.35rem .85rem;
  border-radius:7px;line-height:1.35;transition:background .12s ease,color .12s ease}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);border:var(--ring)}

.tabs{display:flex;gap:0;margin:0 0 1.5rem}
.tabs button{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font-size:1rem;font-weight:600;color:var(--ink-3);padding:.4rem .1rem;margin-inline-end:1.25rem;
  border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

.cur{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;
  margin-bottom:.5rem}
.rate{font-size:.75rem;color:var(--ink-3);margin:0}
.rates{display:flex;flex-wrap:wrap;gap:.25rem .85rem;align-items:baseline;
  margin:0 0 1.75rem;font-size:.75rem;color:var(--ink-3)}
.rates .pin{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.rates .age.stale{color:var(--bad-ink);font-weight:600}

/* ------------------------------------------------------- section headings */

.half{margin:1.75rem 0 .6rem}
.half:first-child{margin-top:0}
.half h3{display:inline;font-size:1.375rem;font-weight:700;letter-spacing:-.025em}
.half .when{font-size:1.375rem;font-weight:700;color:var(--ink-3);letter-spacing:-.025em;
  margin-inline-start:.4rem}
.half p{margin:.25rem 0 0;font-size:.8125rem;color:var(--ink-3)}

.sect{margin-top:2rem}
.sect > h2{font-size:1.375rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.15rem}
.sect > p{font-size:.8125rem;color:var(--ink-3);margin:0 0 .85rem}
.grp{font-size:.75rem;font-weight:600;color:var(--ink-3);margin:1.5rem 0 .5rem}

/* ------------------------------------------------------------- the numbers */

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-bottom:.5rem}
@media (min-width:38rem){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--surface);border-radius:var(--r);padding:16px 20px;
  border:var(--ring);min-width:0;display:block;border:0;text-align:start;width:100%}
.kpi h4{font-size:.75rem;font-weight:600;color:var(--ink-3)}
/* Guy: "יש לך שלוש נקודות אחרי כל סכום, זה לא נעים. רק בבאטים. כנראה שאתה צריך לשים
   סימן של באט במקום שלוש נקודות."

   Those dots were text-overflow:ellipsis. Only baht figures reached them because baht
   figures are the longest, and the character it ate was the ฿ at the end. Truncating a
   money figure is worse than ugly: the next digit it eats is a digit, and the number goes
   on looking like a number. So nothing here clips. The tile is a container and the figure
   is sized from ITS width rather than the viewport's, which is what makes a two column
   grid safe at any width; cqi is capped at both ends so it never grows past the design or
   shrinks past legibility. */
.kpi{container-type:inline-size}
.kpi .n{display:block;font-family:var(--num);font-size:clamp(1.15rem,11cqi,1.6rem);
  font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1.2;
  margin:.2rem 0 .1rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.kpi p{font-size:.75rem;color:var(--ink-3);line-height:1.4}
.kpi.accent .n{color:var(--accent)}
.kpi.bad .n{color:var(--bad)}
.kpi.mine{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}
.kpi.goes{cursor:pointer;position:relative}
.kpi.goes::after{content:"\2039";position:absolute;inset-inline-start:.9rem;top:.75rem;
  color:var(--ink-3);font-size:1.15rem;line-height:1}
.kpi.goes:hover{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}

.clocks{margin:.75rem 0 0;padding:.85rem 1rem;background:var(--surface);border-radius:var(--r-sm);
  font-size:.8125rem;color:var(--ink-2);line-height:1.5;border:var(--ring)}
.clocks b{color:var(--ink);font-weight:600}
.clocks b.warnspan{color:var(--bad-ink)}

/* ------------------------------------------------- inset grouped list rows */

.rows,.sup{background:var(--surface);border-radius:var(--r);border:var(--ring);
  overflow:hidden;display:block}
.row,.sup-row{display:grid;grid-template-columns:1fr auto;gap:.2rem .9rem;align-items:center;
  padding:.8rem 1rem;background:transparent;border:0;width:100%;text-align:start;
  font-family:inherit;font-size:1rem;color:var(--ink);position:relative}
.row + .row::before,.sup-row + .sup-row::before{content:"";position:absolute;
  top:0;inset-inline-start:0;inset-inline-end:1rem;height:1px;background:var(--sep)}
.sup-row,.tappable{cursor:pointer}
.sup-row:hover,.tappable:hover{background:var(--surface-2)}

.who{font-weight:600;color:var(--ink);min-width:0;letter-spacing:-.015em}
.who em{display:block;font-style:normal;font-weight:400;font-size:.8125rem;
  color:var(--ink-3);margin-top:.1rem;letter-spacing:-.005em}
.val{font-family:var(--num);font-weight:500;color:var(--ink);text-align:left;
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.val.none{color:var(--ink-3);font-family:var(--sans);font-weight:500;font-size:.8125rem}
.state{grid-column:1/-1;font-size:.75rem;color:var(--ink-3);display:flex;flex-wrap:wrap;
  gap:.5rem;align-items:center;margin-top:.15rem}
.state.bad{color:var(--bad-ink)}

/* state is a small dot before the name, never a box around the whole row */
.row.stuck .who::before,.row.soft .who::before,.row.train .who::before,
.row.mine .who::before,.row.gap .who::before,.row.fixed .who::before{
  content:"";display:inline-block;width:.4375rem;height:.4375rem;border-radius:50%;
  margin-inline-end:.45rem;vertical-align:.08em}
.row.stuck .who::before{background:var(--bad)}
.row.soft .who::before{background:var(--ink-3)}
.row.train .who::before{background:var(--accent)}
.row.mine .who::before{background:var(--accent)}
.row.gap .who::before{background:var(--bad)}
.row.fixed{opacity:.5}
.row.fixed .who::before{background:var(--ink-3)}
.row.gap .val{color:var(--bad)}

.fix{appearance:none;background:var(--sep);border:0;border-radius:6px;color:var(--ink-2);
  font-size:.75rem;font-weight:600;padding:.2rem .6rem;cursor:pointer}
.fix:hover{background:var(--accent-soft);color:var(--accent)}

.sum{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;justify-content:space-between;
  padding:.85rem 1rem;background:var(--surface);border-radius:var(--r);
  border:var(--ring);margin-top:.6rem}
.sum .lbl{font-size:1rem;font-weight:600;color:var(--ink)}
.sum .amt{font-family:var(--num);font-size:1.3rem;font-weight:600;color:var(--ink);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.sum.soft{margin-top:.4rem;box-shadow:none;background:transparent;padding:.2rem 1rem}
.sum.soft .lbl{font-size:.8125rem;font-weight:500;color:var(--ink-3)}
.sum.soft .amt{font-size:1rem;font-weight:500;color:var(--ink-3)}

.partial{margin-top:.6rem;padding:.85rem 1rem;background:var(--bad-soft);
  border-radius:var(--r-sm);font-size:.8125rem;color:var(--ink);line-height:1.5}
.partial b{font-weight:700;color:var(--bad-ink)}

/* --------------------------------------------------------- the people flow */

.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-bottom:.6rem}
@media (max-width:28rem){.flow{grid-template-columns:1fr}}
.stage{background:var(--surface);border-radius:var(--r);padding:.95rem 1rem 1rem;
  border:var(--ring);min-width:0}
.stage h4{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.stage .n{display:block;font-family:var(--num);font-size:2.1rem;font-weight:600;
  letter-spacing:-.035em;line-height:1.1;margin:.1rem 0 .05rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stage.train .n{color:var(--accent)}
.stage.live .n{color:var(--good)}
.stage.gone .n{color:var(--ink-3)}
.stage .sub{font-size:.75rem;color:var(--ink-3)}

.pass{background:var(--surface);border-radius:var(--r);padding:1rem;border:var(--ring)}
.pass-top{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;margin-bottom:.7rem}
.pass-top b{font-family:var(--num);font-size:1.75rem;font-weight:600;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pass-top span{font-size:.8125rem;color:var(--ink-3)}
.bar{display:flex;height:.5rem;border-radius:999px;overflow:hidden;background:var(--sep)}
.bar i{display:block;height:100%}
.bar .ok{background:var(--good)}
.bar .no{background:var(--bad)}
.pass-key{display:flex;flex-wrap:wrap;gap:.9rem;margin:.6rem 0 0;font-size:.75rem;color:var(--ink-2)}
.pass-key em{font-style:normal;display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  margin-inline-end:.35rem;vertical-align:.02em}
.pass-note{font-size:.75rem;color:var(--ink-3);margin:.7rem 0 0;line-height:1.5}

/* ------------------------------------------------------------- suppliers */

.sup-head{display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:baseline;justify-content:space-between}
.sup-name{font-weight:600;color:var(--ink);font-size:1.0625rem;letter-spacing:-.02em}
.sup-profit{font-family:var(--num);font-weight:600;font-size:1.2rem;color:var(--good);
  white-space:nowrap;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.sup-profit.neg{color:var(--bad)}
.sup-nums{display:flex;flex-wrap:wrap;gap:.15rem .9rem;margin-top:.35rem;
  font-size:.75rem;color:var(--ink-3)}
.sup-nums b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.sup-nums .warn{color:var(--bad-ink)}
.sup-people{display:inline-flex;gap:.2rem;align-items:center;margin-inline-end:.35rem}
.pip{width:.4375rem;height:.4375rem;border-radius:50%;display:inline-block}
.pip.live{background:var(--good)}
.pip.train{background:var(--accent)}
.pip.gone{background:var(--ink-3)}

/* A grid, not a wrapping row. Each figure and its label is one cell, so a narrow screen
   can only ever drop a WHOLE pair to the next line; it can no longer leave a number on
   one line and the words that explain it on another. */
.big-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:.7rem 1.4rem;width:100%;
  background:var(--surface);border-radius:var(--r);padding:16px 20px;cursor:pointer;
  border:var(--ring);color:var(--ink-3);font-size:.8125rem;text-align:start}
.big-line:hover{background:var(--surface-2)}
.big-line .bp{min-width:0}
.big-line b{display:block;font-family:var(--num);font-size:1.5rem;font-weight:600;
  color:var(--ink);letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:start}
/* the LABEL only, and the > matters. Written as a descendant it also matched the .ltr
   span inside the figure, at equal specificity and later in the file, so it turned the
   isolated numeral run into a block: the number then filled the cell and sat at its left
   edge while its label sat at the right, 258px apart on תהל. Two rules deciding one
   element's display is a coin toss, and the weaker one won. */
.big-line .bp > span{display:block;margin-top:.1rem}

/* ------------------------------------------------------------ an entity */

.back{appearance:none;background:none;border:0;color:var(--accent);cursor:pointer;
  font-size:1rem;font-weight:500;padding:0;margin-bottom:1rem;display:inline-flex;
  align-items:center;gap:.15rem}
.back::before{content:"\203A";font-size:1.3rem;line-height:1}
.ent-head{margin-bottom:1.25rem}
.ent-head h2{font-size:2rem;font-weight:700;letter-spacing:-.03em}
.ent-profit{font-family:var(--num);font-size:1.5rem;font-weight:600;color:var(--good);
  margin-top:.1rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ent-profit.neg{color:var(--bad)}
.ent-head p{margin:.3rem 0 0;font-size:.8125rem;color:var(--ink-3)}

/* ----------------------------------------------------------------- forms */

.form{background:var(--surface);border-radius:var(--r);padding:0;border:var(--ring);
  display:block;overflow:hidden}
.field{display:block;padding:.8rem 1rem;position:relative}
.field + .field::before{content:"";position:absolute;top:0;inset-inline-start:0;
  inset-inline-end:1rem;height:1px;background:var(--sep)}
.field > label{display:block;font-size:.75rem;font-weight:600;color:var(--ink-3);margin-bottom:.25rem}
.field .hint{display:block;font-size:.75rem;color:var(--ink-3);margin-top:.3rem;line-height:1.45}
/* the same hint, standing on its own between fields rather than inside one */
.form > .hint{display:block;font-size:.75rem;color:var(--ink-3);line-height:1.45;
  padding:0 1rem .8rem;margin-top:-.3rem}
.field input,.field select,.field textarea{
  background:transparent;border:0;color:var(--ink);font-family:inherit;font-size:1.0625rem;
  padding:0;width:100%;letter-spacing:-.015em}
.field input::placeholder{color:var(--ink-3)}
.field input[inputmode="decimal"]{font-family:var(--num);direction:ltr;text-align:left;
  font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:end}
@media (max-width:26rem){.two{grid-template-columns:1fr}}
.choice{display:flex;flex-wrap:wrap;gap:.35rem}
.choice button{appearance:none;background:var(--sep);border:0;border-radius:8px;
  color:var(--ink-2);font-size:.875rem;font-weight:600;padding:.45rem .9rem;cursor:pointer}
.choice button[aria-pressed="true"]{background:var(--accent-fill);color:var(--accent-on-fill)}
.choice.dir button[aria-pressed="true"][data-v="out"]{background:var(--bad)}

.commit{padding:1rem;display:flex;flex-direction:column;gap:.6rem;position:relative}
.commit::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--sep)}
.go{appearance:none;width:100%;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--accent-fill);color:var(--accent-on-fill);font-size:1.0625rem;font-weight:600;padding:.8rem 1rem;letter-spacing:-.015em}
.go[data-armed="1"]{background:var(--bad);color:#fff}
.go:disabled{background:var(--sep);color:var(--ink-3);cursor:default}
.warn{font-size:.8125rem;color:var(--ink-3);line-height:1.45}
.warn b{color:var(--ink-2);font-weight:600}
.toast{padding:.75rem 1rem;border-radius:var(--r-sm);font-size:.8125rem;font-weight:500;line-height:1.45}
.toast.ok{background:rgba(30,122,56,.1);color:var(--ink)}
.toast.bad{background:var(--bad-soft);color:var(--ink)}
.correcting{padding:.85rem 1rem;background:var(--accent-soft);font-size:.8125rem;
  color:var(--ink);line-height:1.5}
.correcting b{color:var(--accent);font-weight:700}
.correcting button{appearance:none;background:var(--surface);border:0;border-radius:7px;
  color:var(--ink-2);font-size:.75rem;font-weight:600;padding:.25rem .65rem;cursor:pointer;
  margin-inline-start:.5rem}

/* ------------------------------------------------------------- the gate */

.gate{max-width:24rem;margin:clamp(1rem,8vh,4rem) auto;background:var(--surface);
  border-radius:var(--r);padding:1.5rem;border:var(--ring)}
.gate h2{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.4rem}
.gate-p{font-size:.9375rem;color:var(--ink-2);margin:0 0 1.25rem;line-height:1.5}
.gate-form{display:flex;flex-direction:column;gap:.75rem}
.gate-form label{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.gate-form input{background:var(--bg);border:0;border-radius:10px;color:var(--ink);
  font-size:1.0625rem;padding:.75rem .9rem;width:100%;font-family:var(--num)}
.gate-alt{appearance:none;background:none;border:0;color:var(--accent);font-size:.9375rem;
  font-weight:500;padding:.5rem 0;cursor:pointer;margin-top:.5rem}
.gate-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.75rem}
.gate-row .go{flex:1 1 9rem}
.gate-row .gate-alt{margin:0}
.gate-id{background:var(--bg);border-radius:var(--r-sm);padding:.9rem 1rem;margin:0 0 1.25rem}
.gate-id-lbl{font-size:.75rem;font-weight:600;color:var(--ink-3);margin-bottom:.15rem}
.gate-id-lbl + code{display:block;font-family:var(--num);font-size:.875rem;color:var(--ink);
  word-break:break-all;margin-bottom:.9rem}
.gate-id .gate-alt{margin-top:0}

.note{margin-top:2.5rem;font-size:.75rem;color:var(--ink-3);line-height:1.55}
.note b{color:var(--ink-2);font-weight:600}

/* There is no <table> anywhere in this app and there never was one on this design: every
   list is built from .rows. The table styling that used to sit here, and the phone rule
   that turned those tables into cards, were both dressing a thing that does not exist.
   Deleted rather than kept for a table somebody might add, because a rule nobody can see
   firing is a rule nobody can trust. */

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

/* the period picker is a segmented control with a little air under it */
.seg.periods{margin-bottom:.7rem}

/* typed month numbers, opened inside a person's row */
.monthnums{grid-column:1/-1;margin-top:.6rem;padding:.8rem;background:var(--surface-2);
  border-radius:var(--r-sm);border:var(--ring)}
.monthnums .hint{font-size:.75rem;color:var(--ink-3);margin-bottom:.6rem;display:block}
.numgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-bottom:.7rem}
@media (max-width:26rem){.numgrid{grid-template-columns:1fr}}
.numfield{display:block}
.numfield span{display:block;font-size:.75rem;font-weight:600;color:var(--ink-3);margin-bottom:.2rem}
.numfield input{width:100%;background:var(--surface);border:var(--ring);border-radius:6px;
  color:var(--ink);font-family:inherit;font-size:1rem;padding:.4rem .55rem}

/* the reconciliation, the one line that says the book matches the bank */
.recon{margin:.6rem 0 0;padding:.85rem 1rem;background:var(--surface);border:var(--ring);
  border-radius:var(--r-sm);font-size:.8125rem;color:var(--ink-2);line-height:1.5}
.recon b{color:var(--good);font-weight:700}
.recon.off{background:var(--bad-soft)}
.recon.off b{color:var(--bad-ink)}

/* a contract, and its ladder */
.contract{background:var(--surface);border:var(--ring);border-radius:var(--r);
  padding:1rem;margin-bottom:.6rem}
.contract.empty{background:var(--surface-2)}
.contract .sub{font-size:.75rem;color:var(--ink-3);margin-top:.2rem}
.ladder{display:flex;flex-direction:column;margin:.7rem 0 .2rem}
.step{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.45rem 0;position:relative}
.step + .step::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--sep)}
.step .range{font-size:.875rem;color:var(--ink-2)}
.step .rate{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.inlineedit{display:inline-flex;gap:.4rem;align-items:center;margin-inline-start:.5rem}
.inlineedit input{background:var(--surface-2);border:var(--ring);border-radius:6px;
  color:var(--ink);font-family:inherit;font-size:.9375rem;padding:.3rem .5rem;width:11rem}
.clocks.off{background:var(--bad-soft)}

/* the chart: bars to one scale, and not one character of text inside the svg */
.chart{background:var(--surface);border:var(--ring);border-radius:var(--r);padding:1rem;margin-bottom:.6rem}
.chart svg{display:block;overflow:visible}
.chart .b-in{fill:var(--good)}
.chart .b-out{fill:var(--accent)}
.chart .axis{stroke:var(--sep);stroke-width:1}
.chart-labels{display:grid;margin-top:.4rem;direction:rtl}
.chart-labels span{font-size:.7rem;color:var(--ink-3);text-align:center;
  font-variant-numeric:tabular-nums;direction:ltr}
.chart .pass-key{margin-top:.7rem}

/* ------------------------------------------------- the three main screens */

/* הכל · ספקים · אנשים. A segmented control rather than three more tabs: they are three
   readings of one screen, and promoting them to the top row would have made twelve. */
.subseg{display:flex;gap:.2rem;padding:.2rem;background:var(--surface-2);border:var(--ring);
  border-radius:9px;margin-bottom:1.1rem}
.subseg button{appearance:none;border:0;background:transparent;cursor:pointer;flex:1;
  font-family:inherit;font-size:.9375rem;font-weight:600;color:var(--ink-2);
  padding:.45rem .5rem;border-radius:7px;line-height:1.35;
  transition:background .12s ease,color .12s ease}
.subseg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);
  border:var(--ring)}

/* ------------------------------------------------------ doing it from here */

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 .2rem}
.chip{appearance:none;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:600;
  color:var(--ink);background:var(--surface);border:var(--ring);border-radius:999px;
  padding:.45rem .95rem;line-height:1.35}
.chip:hover{background:var(--surface-2)}
.chip:active{transform:scale(.98)}

/* -------------------------------------------------------- ספק נגד ספק */

.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}
.cmp-card{appearance:none;cursor:pointer;text-align:start;font-family:inherit;width:100%;
  background:var(--surface);border:var(--ring);border-radius:var(--r);padding:16px 20px}
.cmp-card:hover{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}
.cmp-card h4{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.6rem}
.cmp-card > p{font-size:.75rem;color:var(--ink-3);line-height:1.5;margin-top:.6rem}
.cmp-card.bad{background:var(--bad-soft)}

/* one bar, two parts, one scale across every card, so the cards read against each other
   rather than each against itself */
.cmp-bar{display:flex;flex-direction:column;gap:3px;margin-bottom:.7rem}
.cmp-bar .part{display:block;height:8px;border-radius:999px;min-width:2px}
.cmp-bar .in{background:var(--good)}
.cmp-bar .out{background:var(--accent-fill)}

.cmp-nums{display:flex;gap:1.1rem;flex-wrap:wrap}
.np b{display:block;font-size:1.05rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
.np span{display:block;font-size:.7rem;color:var(--ink-3);margin-top:.1rem}
.np.good b{color:var(--good)}
.np.bad b{color:var(--bad-ink)}

.numfield.wide{grid-column:1/-1}
.hint.bad-ink{color:var(--bad-ink)}
.empty{padding:1rem;background:var(--surface-2);border:var(--ring);border-radius:var(--r-sm);
  font-size:.875rem;color:var(--ink-3);line-height:1.5}

/* ------------------------------------------------------------ the phone */

/* Guy: "אם מישהו נכנס לזה במובייל, שהתפריט יהיה מותאם למובייל. אף אחד לא יגלול ימינה
   שמאלה במובייל, שלא תהיה גלילה כזאת, ושזה יהיה מותאם פרפקט למובייל."

   So below 760px the row of nine is replaced by a bar of five fixed to the bottom, where
   a thumb reaches, and the other four sit behind עוד. Both bars write the same data-view
   and there is one list of screens. */
.tabbar{display:none}
.sheet{display:none}

@media (max-width:760px){
  .tabs{display:none}

  /* Measured off blackops.co.il/portal's own mobile bar rather than styled from memory:
     65px tall, solid white, one hairline on top, 20px icons, and no blur and no shadow
     anywhere. The translucent blurred bar that was here first was the system convention,
     not his page, and Guy asked for his page. */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;
    inset-inline:0;bottom:0;z-index:40;
    background:var(--surface);
    border-top:1px solid var(--sep);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar button{appearance:none;border:0;background:transparent;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-family:inherit;font-size:.625rem;font-weight:600;color:var(--ink-3);
    padding:.72rem .15rem .6rem;line-height:1.2;min-width:0}
  .tabbar button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .tabbar button svg circle[cx="5"],.tabbar button svg circle[cx="12"],
  .tabbar button svg circle[cx="19"]{fill:currentColor;stroke:none}
  .tabbar button span{overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
  .tabbar button[aria-selected="true"]{color:var(--accent)}

  /* the bar sits over the page, so the page ends above it rather than under it */
  .wrap{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}

  /* Two columns is all a phone fits, and three figures in two columns leaves one sitting
     alone in half a row, which reads as a layout that ran out rather than one that ended.
     An odd last one takes the whole row instead. */
  .big-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big-line .bp:last-child:nth-child(odd){grid-column:1/-1}

  .sheet{display:block;position:fixed;inset:0;z-index:50}
  .sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.28)}
  /* two cards with air between them, the way the system sheet this is imitating does it.
     One card with a divider would read as "cancel is one of the destinations". */
  .sheet-card,.sheet-cancel{position:absolute;inset-inline:.6rem;
    background:var(--surface);border-radius:14px;overflow:hidden;
    box-shadow:0 10px 34px rgba(0,0,0,.16);animation:sheet-up .18s ease-out}
  .sheet-cancel{bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}
  .sheet-card{bottom:calc(4.2rem + env(safe-area-inset-bottom,0px))}
  .sheet-item,.sheet-cancel{appearance:none;border:0;cursor:pointer;
    display:block;width:100%;font-family:inherit;font-size:1.0625rem;color:var(--ink);
    padding:.95rem 1rem;text-align:center}
  .sheet-item{position:relative;background:var(--surface)}
  .sheet-item + .sheet-item::before{content:"";position:absolute;
    top:0;inset-inline:0;height:1px;background:var(--sep)}
  .sheet-item[aria-selected="true"]{color:var(--accent);font-weight:700}
  .sheet-cancel{font-weight:700}
  @keyframes sheet-up{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}

  .cmp{grid-template-columns:1fr}
}

/* a supplier the period cannot rate yet: shown, without a ratio, with the reason */
.cmp-card.quiet{background:var(--surface-2)}
.cmp-card .reason{color:var(--ink-2);font-size:.8125rem;margin-top:.1rem}