/* ==================================================== REPORTS · the picture, not the spreadsheet
   Amit: "the graphs on the reports look kind of bland" - 2026-07-17. He is right, and the cause
   was not taste. It was a WIRING GAP.

   app.css's own reports block says, in capitals: "THE BARS ARE INK, NOT RED", and it builds
   `.rbar.strong .rbf{background:var(--ink)}` to deliver exactly that. reports.js never passed
   `strong` to repBar() - not once, in four call sites. So every bar on the page fell through to
   the base rule and rendered in `--line-strong` #D2D3D6: the HAIRLINE colour. On a `--soft-2`
   #EFF0F1 track that is a fill-to-track contrast of about 1.25:1.

   The consequence is worse than bland, and it is why this file exists rather than a tweak:

       AT THAT CONTRAST, A FULL BAR AND AN EMPTY ONE LOOK THE SAME.

   Martin's funnel has three stages with no cards in them. Each drew a full-width `--soft-2`
   track and nothing else - and beside them QUOTED, the biggest number on his page, drew the
   same rectangle 1.25:1 darker. Read at a glance (which is the only way anybody reads a bar),
   Martin's report said COLD and WARM have bars. They are zero. The page's only picture could
   not tell the maximum from nothing, which is the one job a bar has.

   So this file finishes what app.css specified rather than redesigning it. Ink bars, a track
   that gets out of the way, and one red per table.

   ------------------------------------------------------------------ WHY THE BAR MOVED INSIDE
   The bar used to be a 180px column at the far right (`.rbcell`), which cost it twice:

     1. YOU READ THE NUMBER, THEN TRAVELLED 300px TO A GREY SMUDGE. A bar earns its space by
        being compared, and a comparison you have to walk to is a number you read instead.
     2. IT DID NOT FIT, SO AMIT LOST IT. `repByAgent` sets `bar = !showComm` - the one table
        that answers "who is carrying the number", with the bar dropped for the ONE person who
        may see the commission column beside it. app.css records the trade honestly ("the bar
        is 180px of picture; the fact wins") and it was the right call given a column.

   It is not a column any more. The bar lives UNDER the number, inside `.rval`, where it costs
   zero horizontal space. That resolves (2) at no cost - By agent keeps commission AND gets its
   picture back - and it resolves (1) by construction: every bar on this page is now drawn
   directly beneath the exact figure it depicts. There is no unlabelled bar anywhere.

   It also reverses app.css's phone rule (`.rbcell{display:none}` at 720px: "The bar is the
   first thing to go on a phone... losing the picture costs nothing"). That was true of a column
   competing for width. A bar under a number competes for nothing, so the phone keeps the
   picture. The reasoning was sound; the premise it rested on is gone.

   -------------------------------------------------------------------------- RED MEANS BIGGEST
   app.css: "Six red bars would shout six times and mean nothing... The bar is a comparison, not
   an alarm." That stands, and this file does not break it - it is an argument against SIX red
   bars, not against ONE. Red is Multitec's colour and here it carries one meaning, LOOK HERE:

       exactly one bar per table is red - the largest - and every other bar is ink.

   So By model answers "which press sells" in red, By salesman answers "who is carrying the
   number" in red, By month answers "when were we busiest" in red. Each is that section's whole
   question, answered before you read a digit. On By model only the MODEL rows can take it: the
   450/530 rows are a breakdown of the answer, not a candidate for it, so they are drawn a step
   down in `--dim` and never claim the red.

   BY STAGE IS THE EXCEPTION AND IT IS NOT AN INCONSISTENCY. Its bars take the stage's OWN chip
   colour, straight off `.rstage.s-*` - grey, blue, amber, red, green, grey. That is the board's
   temperature vocabulary, already on screen two inches above in the chip, and the funnel is the
   one place where the colour IS the datum. Red lands on HOT, which is the thing to look at in a
   funnel - the same meaning red carries everywhere else on the page. One rule, two spellings.

   ------------------------------------------------------------------------------- AND THE SCALE
   Every bar starts at zero and is scaled to the MAXIMUM OF ITS OWN TABLE, so a bar is only
   honest if that is said out loud. `.rscale` prints it in the value column's header - "0 –
   ₹ 34.79 Cr" - because a full-width bar means nothing until you know what full width is, and
   because each table having its own scale is a real caveat that a reader cannot infer.

   Nothing here computes a figure. A bar's width is `value / max` as a CSS percentage, which is
   reports.js's one documented exception and stays one: a picture of a number, never a number. */

/* ------------------------------------------------------------------------------- THE BAR ITSELF
   The track goes to `--soft` (#F7F8F8, one step off white). It is the space available, not a
   bar - which is the entire fix for the empty-row lie above: with an ink fill the difference
   between zero and maximum is now about 16:1, not 1.25:1. */
.rbar{background:var(--soft);height:8px;border-radius:2px;min-width:0;
  box-shadow:inset 0 0 0 1px rgba(var(--shade),.04)}
.rbf{background:var(--ink);border-radius:2px;transition:width .18s ease}
/* THE BIGGEST THING IN THE TABLE. One per table - see the red note above. */
/* THE BIGGEST BAR IS INK, NOT RED. On BY MODEL the tallest bar was red, which on a chart
   reads as "this one is a problem" - and it meant the opposite: S2 was the press that had won
   the most. Red is the brand and the alarm (overdue, hot); a maximum is neither. */
.rbar.top .rbf{background:var(--ink)}

/* The bar under its number. `.rval` is the money cell in every table on this page, so this is
   the one place the geometry is stated. The width is a floor, not a cap: a table with room
   gives the bar more, and a comparison gets better the longer it is. */
.rtab .rval{width:172px;min-width:150px;padding-top:8px;padding-bottom:8px;
  vertical-align:middle}
.rtab .rval .rvn{display:block;line-height:1.2}
.rtab .rval .rbar{display:block;width:100%;margin-top:6px}
/* A row with no money gets no bar drawn at all - not a 0%-wide one. An empty track is still a
   rectangle, and a rectangle in a bar column is a bar to the eye scanning past it. The em-dash
   above it already says "nothing"; a second mark saying nothing is what the old page did. */
.rtab .rval.zero .rbar{visibility:hidden}

/* The width split, a step down from the model total it belongs to. Same scale, same zero, less
   ink - so S2's total reads first and its 450/530 breakdown reads second, which is the order
   the question is actually asked in. `--dim` not `--line-strong`: subordinate, not invisible.
   That distinction is the whole lesson of this file. */
.rtab .rsub-row .rval{padding-top:5px;padding-bottom:5px}
.rtab .rsub-row .rbar{height:5px;margin-top:4px}
.rtab .rsub-row .rbf{background:var(--dim)}

/* THE FUNNEL, IN THE BOARD'S OWN COLOURS. Lifted from `.rstage.s-*`'s foreground - the chip and
   its bar are now the same colour by construction, so a reader never has to learn a second
   legend for the same six words. Cold to hot and stop, then won green and lost grey: Amit's
   temperature, which app.css already argued is not a funnel of alarm ("a lost deal is a fact,
   not an alarm"). */
.rtab .rbar.s-discussion .rbf{background:var(--line-strong)}
.rtab .rbar.s-quoted .rbf{background:var(--muted)}
.rtab .rbar.s-cold   .rbf{background:var(--blue)}
.rtab .rbar.s-warm   .rbf{background:var(--amber)}
.rtab .rbar.s-hot    .rbf{background:var(--red)}
.rtab .rbar.s-won    .rbf{background:var(--green)}
.rtab .rbar.s-lost   .rbf{background:var(--dim)}

/* WHAT FULL WIDTH MEANS. A second line in the value column's header, in mono because it is a
   figure. Quiet on purpose - it is a footnote to the column, not a heading of its own. */
.rtab thead th .rscale{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;
  font-weight:400;color:var(--dim);letter-spacing:0;text-transform:none}

/* The old bar column is gone from the markup; this is belt-and-braces so a stale `.rbcell`
   never re-opens 180px of empty table. */
.rbcell{display:none}

/* ------------------------------------------------------------------------------------ THE TILES
   Four facts, and one of them is the answer. Offers/Pursuits/Won are counts you check; Issued
   value is the number Amit came to the page for, and it was drawn in the same box, at the same
   weight, as a count of 3. A red rule on the one tile that carries money - the same red as the
   biggest bar in every table below it, meaning the same thing: look here. Nothing else changes;
   the tile keeps its hairline and its flat fill. */
.rtile.money{border-top:2px solid var(--red);padding-top:13px}
.rtile.money .rv{font-size:29px}

/* ------------------------------------------------------------------------------------ BY MONTH
   Ink columns, the busiest month in red - the same sentence as every other table.

   AND IT NO LONGER SPRAWLS. `.rcol{flex:1 1 0}` made a single month a 44px bar marooned in the
   middle of 900px of white, which reads as a broken chart rather than as a young book. The
   columns now grow from the left and cap at 56px, so one month is one column at the left edge
   and twenty-four still share the width. The demo data has ONE month; the real book has years
   of them, and this must not be tuned to either. */
.rmonths{justify-content:flex-start}
.rcol{flex:1 1 30px;max-width:56px}
.rcb{background:var(--ink)}
.rcol.top .rcb{background:var(--red)}
/* Hover was already red, which now collides with "red means the biggest". Hover is a pointer,
   not a fact about the data, so it gives way: the brighter red reads as a highlight of whatever
   it is over, and leaves the flat red to mean the maximum. */
.rcol:hover .rcb{background:var(--red-bright)}
.rcol.top:hover .rcb{background:var(--red-bright)}
/* The count above each column is the same fact as `.rvn` above each bar, so it is drawn like
   one rather than like a caption. The busiest month says its number in ink. */
.rcv{font-size:11.5px;color:var(--muted);font-weight:500}
.rcol.top .rcv{color:var(--ink);font-weight:600}

@media(max-width:720px){
  /* THE PICTURE STAYS ON THE PHONE. app.css drops `.rbcell` here and its reasoning was right
     for a column that competed for width. This bar is under its own number and competes for
     nothing, so there is nothing to trade: the phone keeps both the fact and the comparison.
     Only the geometry tightens. */
  .rtab .rval{width:auto;min-width:112px}
  .rtab .rval .rbar{margin-top:5px}
  .rtile.money .rv{font-size:23px}
}

/* The issued figure under a won one: context, not a rival. Same column, a step down in size
   and colour, so the eye takes the won number first and finds the denominator only if it
   goes looking. See repWonVal() in reports.js. */
.rtab .rval .rvsub{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;
  color:var(--dim);line-height:1.3}