/* Styling for the one line every screen speaks on (see screen.js).
 *
 * Deliberately tiny. It exists so the next screen does not invent its own way
 * of showing a failure -- which is exactly how the reference dashboard ended up
 * with a slightly different version of everything.
 *
 * ONE LOOK FOR ONE MEANING. This line is only ever a FAILURE: something was
 * refused, or could not be read, or is taking longer than it should. Anything
 * merely informational gets its own look elsewhere, because two different
 * situations must never look identical (logged in cycle 8, and again in cycle
 * 24 when a note and a refusal on the items screen shared one style).
 *
 * AND ONLY ONE SCREEN USES IT SO FAR, said plainly because an earlier version
 * of this comment read as though the whole product already did. Item Master
 * speaks the same sentences, through the same code, on its own
 * `.k-items__said` -- which is warm-coloured where this is red. So one
 * message can look like a warning on one screen and a failure on the next.
 * This file is the one that matches the shell's own failure banner; Item
 * Master is the odd one out and should move onto this class. It is working
 * code and moving it is his call, so it is recorded rather than done.
 *
 * Every COLOUR from a token, and the commit gate refuses one written out
 * (D25). No typeface is set at all -- the line inherits the page's, which is
 * what it should do. Sizes and spacing are written here, because there is no
 * scale for them in tokens.css yet and nothing checks them.
 */

.k-screen__said {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: 6px;
  background: var(--danger-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  /* A long reason from a platform must not push the page sideways on a phone. */
  overflow-wrap: anywhere;
}

/* THE WAY BACK from a change that has just been made.
 *
 * **IT SAYS WHERE IT SITS AND NOTHING ELSE NOW (D142).** It used to paint a
 * whole button here -- a size, a font, colours, a hover and a focus ring --
 * because the kind it asked for (`k-button--plain`) had never existed in any
 * stylesheet, so without this it drew as a bare browser default.
 *
 * That is fixed at the source: the button asks for `k-button--ordinary`, which
 * is a real kind. This file was missed by the button migration and went on
 * winning, so the one control the whole undo promise rests on stood 40px where
 * every other button is 37px, was drawn ordinary whatever kind it was given,
 * and -- because its hover rule had no `:not(:disabled)` -- lit up under the
 * cursor while it was switched off. Found by an independent reviewer.
 */
.k-screen__way-back {
  margin: 8px 0 0;
}

/* **THE LINK TO A SCREEN'S READING PAGE IS A MARK NOW, not a button full of
 * words.** His instruction, 2026-09-01: *"the explainers behind bulb icon
 * globally."*
 *
 * It was a bordered button carrying a whole sentence, sitting between the
 * heading and the work. On Needs Review it and the `i` between them pushed the
 * table clean off the first screenful of a phone.
 *
 * **THE SHAPE COMES FROM `k-icon`**, the same as every other mark in the top bar
 * and beside every column heading -- so it is already tall enough to press,
 * which this was NOT: written as an inline-block with padding it came out 25px
 * on a phone, well under the 37px everything else here is and further under the
 * 44px D67 asks for. It is a LINK rather than a button, which is exactly why
 * nothing caught it: the gate's tap-target check looks at buttons. Taking the
 * size from `k-icon` closes that by construction rather than by remembering. */
.k-guide {
  text-decoration: none;
}

/* **SHOWN AS IT IS, and it was not.** It was greyed and at 55% opacity so that a
 * bulb beside every heading would not compete with the work -- and on his screen
 * it read as a smudge: *"the bulb icon is not clearly visible in the app."*
 *
 * **That was my worry rather than his instruction, and there are four of these
 * in the whole product.** A mark nobody can see is not quiet, it is missing.
 *
 * A little larger than the `i` beside it, because a picture needs more room than
 * a letter to read as itself. */
.k-guide__mark {
  font-size: 17px;
  line-height: 1;
}

/* ------------------------------------------------------------- the insights

 * **WHAT A SCREEN ADDS UP TO, as figures rather than as a sentence.** His
 * instruction, 2026-09-01: *"the insight written like this does not look good,
 * neither on the phone nor on laptop... convert it into some buttons or
 * something... create a global rule which is going to be presentable."*
 *
 * **THE SAME SHAPE ON A PHONE AND A LAPTOP**, which is the other half of what he
 * asked for. It is a wrapping row of small blocks, so a wide screen puts them
 * all on one line and a narrow one puts two or three per line -- nothing is
 * hidden, nothing is a different design, and it never takes a paragraph's height.
 */
.k-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

/* **ON THE PRODUCT'S ONE CONTROL HEIGHT, like every button and every box.**
 *
 * His question, 2026-09-02, looking at Stock: *"these insight blocks are higher
 * than the others. Are these not following the global size? If something has
 * been set globally it should be followed everywhere."*
 *
 * MEASURED IN A REAL BROWSER, and he was right: 41.3px against the 37px every
 * button and the search box are on. They had NO height of their own at all --
 * they are a flex row, so the row was as tall as the tallest thing inside any
 * one of them, and a block carrying an `i` (32px) dragged all three up with it.
 * Nothing was making them the same as anything; they happened to look close.
 *
 * So: the same height, from the same token, and the vertical padding goes --
 * the height and the centring do that work now, and padding on top of a
 * min-height is what made a block with a mark in it overflow its own size. */
.k-insight {
  box-sizing: border-box;
  display: flex;
  /* **IN THE MIDDLE OF THE BLOCK, not sitting on the top of it.** His
   * instruction, 2026-09-02: *"the values on those tabs are stuck to the top...
   * it should be centred in the middle."* Lined up on their shared baseline
   * instead -- which is what this said before -- the words sat at the top of a
   * block that now has a height of its own, with the space left over underneath
   * them. Measured: 9.8px above and 9.8px below. */
  align-items: center;
  gap: 6px;
  min-height: var(--control-height);
  padding: 0 10px;
  font-family: var(--font);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* **THE MARK IS NOT WHAT SETS THE HEIGHT.** It is 32px of button inside a 37px
 * block; left to stretch it would fill the block edge to edge and there would
 * be no block left around it. */
.k-insight .k-help {
  align-self: center;
}

/* **THE NUMBER IS WHAT THE EYE LANDS ON.** In a sentence it is buried mid-line;
 * here it is the biggest thing in its own block. */
.k-insight__figure {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.k-insight__says {
  font-size: 12px;
  color: var(--text-muted);
}

/* **WORK WAITING IS NOT THE SAME KIND OF FACT AS A COUNT.** "3 still need a bill
 * of material" is something to do; "4 products" is not. In a row where every
 * block looks the same, the one that needs the seller is invisible. */
.k-insight--needs {
  /* **THE SAME WEIGHT AS THE OTHERS, and only the number is coloured.**
   *
   * His instruction, 2026-09-02: *"because of this different colour these three
   * blocks feel bigger than the first ones. Check if those are really bigger.
   * In case they are not, and it just feels like it because of the colour, fix
   * it -- it should be in the same tone."*
   *
   * Measured in a real browser: identical. Same padding, same border, same type
   * sizes -- what made them look heavier was a filled background against the
   * full-strength warning colour on the border. So the fill is gone and the
   * edge is `--warn-edge`, which is as light as an ordinary border and only
   * warmer: the block reads as one of the row, and the figure inside it is
   * still the colour this product uses for work waiting. */
  border-color: var(--warn-edge);
}

.k-insight--needs .k-insight__figure {
  color: var(--warn);
}

/* **THE MARK A PHONE SHOWS INSTEAD OF THE BLOCKS.** Hidden at the desk, where
 * there is room for the figures themselves. */
.k-insights__mark {
  /* Everything about how it is drawn comes from `k-icon` -- 32px, no border
     until it is pointed at (D142). What is set here is only what is true of
     THIS mark: it is not shown at the desk, and the dot is placed against it. */
  display: none;
  position: relative;
}

.k-insights__face {
  font-size: 17px;
  line-height: 1;
}

/* **THE MARK FOR WHAT IS WORK, beside the one for what things add up to.** His
 * instruction, 2026-09-02: *"I want the alarm out of the insights, and a
 * separate icon for it on mobile."* It is the same mark in every way but its
 * colour and what is behind it -- two marks that looked different would read as
 * two different kinds of control. */
.k-insights__mark--needs {
  border-color: var(--warn-edge);
}

/* **AND IT SAYS HOW MANY.** This replaced a dot, which could say only "there is
 * something", and one alarm and nine are different mornings. */
.k-insights__count {
  position: absolute;
  top: -4px;
  right: -4px;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--warn);
  /* THE SAME PAIRING THE COUNT ON A BUTTON USES -- warn behind, `--on-brand` in
     front. Two count badges in one product cannot be two different colours. */
  color: var(--on-brand);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* **ON A PHONE THE FIGURES GO BEHIND THE MARK.** His instruction, 2026-09-02:
 * *"move the insights behind an icon on phone globally."*
 *
 * They were a row that slid sideways, and beside a heading that left about two
 * of six in view with the rest cut off at the edge of the screen -- which is
 * what he was looking at when he asked. Behind a mark, pressed when he wants
 * them.
 *
 * **THIS SAID "One mark... and the dot says whether it is worth pressing" UNTIL
 * 2026-09-03, describing something the same batch had already deleted.** There
 * is no dot -- it could say only "there is something" and could not be pressed
 * for the thing it was about -- and there are TWO marks now, one for what the
 * screen adds up to and one for what needs a look, each carrying its own count.
 * `screen.css:213` and `screen.js:401` both said so while this went on saying
 * otherwise; a cold reader found it. */
@media (max-width: 600px) {
  .k-insight {
    display: none;
  }

  .k-insights__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* **THE HEADING AND THE FIGURES ON ONE ROW** -- his instruction on Products and
 * again on Bills of material. It was written twice, once per screen, and is one
 * rule here.
 *
 * **`baseline`, not `center`.** The name is 17-20px and the figures 12-13px;
 * centred, the small text floats in the middle of the big text instead of
 * sitting on the same line as it. */
.k-screen__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

/* The heading keeps its width and gives up its own bottom margin to the row that
 * now holds it. */
.k-screen__headline > :first-child {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* And the figures take whatever is left. Whatever holds them -- a screen names
 * its own box -- so this asks by POSITION rather than by a class each screen
 * would have to remember to use. */
.k-screen__headline > :not(:first-child) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* **AND ON A PHONE IT DOES NOT WRAP.** His instruction, 2026-09-01: *"in mobile
 * phone those are coming in two rows and those are coming below the product
 * title. It should not happen. In mobile also it should continue in the same
 * row."* Wrapping is exactly what he was describing. */
@media (max-width: 600px) {
  .k-screen__headline {
    flex-wrap: nowrap;
  }

  /* `1 1 0`, not `1 1 auto`: on `auto` the blocks' own width is the starting
   * point, so a row of six pushes the name off the screen instead of scrolling
   * within what is left of the line. */
  .k-screen__headline > :not(:first-child) {
    flex: 1 1 0;
  }
}