/* ============================================================================
   Floom — the working surface
   ----------------------------------------------------------------------------
   A piece of the product rather than a picture of one: a position and the
   entries behind it, a waterfall under its clause, a quarter's collection, two
   scenarios. It sits on the home page's product cards and again, larger, on
   each product's own page, so it lives in one file and both load it.

   Ink and orange only. States are cells — filled is done, open is in hand,
   dashed is chased, an empty box is missing — which is the design language's
   own vocabulary and saves the page a second colour.
   ========================================================================== */
.prod-card .prod-ui{ align-self: center; }

/* ── the working surface on each card ────────────────────────────────────
   A piece of the product, not a picture of it: the position and its two
   entries, the waterfall under its own clause, the collection with one
   company still missing, the two scenarios. Built from the site's own ink
   and orange only — states are cells, filled, open, dashed and empty, which
   is the design language's own vocabulary and needs no second colour. */
.prod-ui{
  display: grid; gap: 12px; align-content: start;
  padding: 16px 16px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ap-ink) 2.5%, #FFFFFF);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.3;
}
.tnum{ font-variant-numeric: tabular-nums; }
.pu-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pu-title{ font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--black); }
.pu-sub{ font-size: 12px; color: var(--text-secondary); }
.pu-label{
  font-size: 10.5px; font-weight: 500; line-height: 1;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
}
.pu-lead{ margin: 0; font-size: 13px; font-weight: 600; color: var(--black); }

/* the three figures on a position */
.pu-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pu-stats > div{
  display: grid; gap: 4px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 8%, transparent);
  border-radius: 9px;
}
.pu-stats b{ font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--black); }

/* what happened to it, latest first; the current entry is a filled cell */
.pu-tl{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pu-tl li{ display: grid; grid-template-columns: 82px 8px minmax(0, 1fr); gap: 12px; align-items: center; }
.pu-date{ font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.pu-tl b{ font-size: 12.5px; font-weight: 600; color: var(--black); }

/* a measure against its own scale */
.pu-bars{ display: grid; gap: 8px; }
.pu-bar{ display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pu-bar-k{ font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.pu-bar-t{
  height: 9px; border-radius: 2px;
  background: color-mix(in srgb, var(--ap-ink) 7%, transparent);
  overflow: hidden;
}
.pu-bar-t i{ display: block; height: 100%; background: var(--ap-orange); }
.pu-bar-t i.is-ink{ background: color-mix(in srgb, var(--ap-ink) 62%, transparent); }
.pu-bar-v{ font-size: 12px; font-weight: 600; color: var(--black); white-space: nowrap; }

/* who has reported, and who has not */
.pu-split{ display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 16px; align-items: center; }
.pu-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pu-list li{ display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.pu-list span{ color: var(--black); }
.pu-list em{ font-style: normal; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
/* waiting is dashed, missing is an empty box — the language's own states */
.prod-ui .th-cell.is-wait{ background: transparent; box-shadow: none; outline: 1.25px dashed var(--ap-orange); outline-offset: -1.25px; }
.prod-ui .th-cell.is-miss{ background: transparent; box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--ap-ink) 26%, transparent); }

.pu-trend{ display: grid; gap: 8px; }
.pu-trend svg{ width: 100%; height: 48px; display: block; }
.pu-line{ fill: none; stroke: var(--ap-orange); stroke-width: 2.2; }
.pu-fill{ fill: color-mix(in srgb, var(--ap-orange) 9%, transparent); stroke: none; }

/* where a number came from */
.pu-prov{ margin: 0; font-size: 11.5px; color: var(--text-secondary); }
.pu-prov span{
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.pu-prov .is-rec{ color: color-mix(in srgb, var(--ap-ink) 72%, transparent); }
.pu-prov .is-asm{ color: var(--ap-orange); }
.pu-prov span::before{
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px;
  background: currentColor;
}


/* ══ the parts the home page's story sections ask for ══════════════════════
   Everything above is a view of a record. These four are the things that
   happen TO one: somebody asks, a change is proposed, the clause it came from
   is quoted, and the work lands. Same ink and orange, same cells. */

/* what somebody asked, and who */
.pu-ask{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ap-ink) 3%, transparent);
}
.pu-ask .who{
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: 4px; white-space: nowrap;
}
.pu-ask q{ quotes: none; font-size: 12.5px; font-weight: 600; color: var(--black); }

/* a proposed change, before beside after */
.pu-diff{
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 10px;
  overflow: hidden;
}
.pu-diff-row{
  display: grid; grid-template-columns: minmax(96px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 12px;
  align-items: baseline;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid color-mix(in srgb, var(--ap-ink) 8%, transparent);
}
.pu-diff-row:last-child{ border-bottom: 0; }
.pu-diff-row.is-head{ background: color-mix(in srgb, var(--ap-ink) 3%, transparent); }
.pu-diff-row.is-head span{
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
}
.pu-diff-row .k{ color: var(--text-secondary); }
.pu-diff-row .old{ color: var(--text-secondary); text-decoration: line-through; }
.pu-diff-row .same{ color: var(--text-secondary); }
.pu-diff-row .new{ font-weight: 600; color: var(--ap-orange); }

/* the work landed. A filled cell, because that is what done looks like here. */
.pu-done{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ap-orange) 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ap-orange) 6%, transparent);
  font-size: 12px;
  color: var(--text-secondary);
}
.pu-done b{ color: var(--black); font-weight: 600; }

/* the clause the terms were read out of */
.pu-doc{
  padding: 16px 16px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
}
.pu-doc-h{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--ap-ink) 18%, transparent);
  font-size: 11px;
  color: var(--text-secondary);
}
.pu-doc p{ margin: 0; }
.pu-doc mark, .pu-mail mark{
  background: color-mix(in srgb, var(--ap-orange) 14%, transparent);
  color: var(--black);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ap-orange) 26%, transparent);
  padding: 0 4px;
}
.pu-doc .faded{ color: color-mix(in srgb, var(--ap-ink) 34%, transparent); }

/* A table of figures is the one thing in here that will not wrap: every cell
   is nowrap on purpose, so on a phone it scrolls inside its own box rather
   than widening the section that holds it. */
.pu-scroll{ overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }

/* a table of what it comes to */
.pu-table{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pu-table th{
  text-align: left;
  padding: 8px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ap-ink) 10%, transparent);
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pu-table td{
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ap-ink) 8%, transparent);
  font-size: 12.5px;
  color: var(--black);
  white-space: nowrap;
}
.pu-table tr:last-child td{ border-bottom: 0; }
.pu-table .r{ text-align: right; }

/* a key and its value, the plainest thing on the page */
.pu-kv{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 12px; }
.pu-kv dt{ color: var(--text-secondary); white-space: nowrap; }
.pu-kv dd{ margin: 0; text-align: right; font-weight: 600; color: var(--black); font-variant-numeric: tabular-nums; }

/* a box inside the surface, for when two things sit beside each other */
.pu-box{
  display: grid; gap: 8px; align-content: start;
  padding: 12px 12px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 10px;
  background: #FFFFFF;
}
.pu-cols{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* what arrived, and who sent it */
.pu-mail{
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}
.pu-mail-h{
  display: grid; gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ap-ink) 8%, transparent);
  background: color-mix(in srgb, var(--ap-ink) 3%, transparent);
  font-size: 11.5px;
  color: var(--text-secondary);
}
.pu-mail-h b{ color: var(--black); font-weight: 600; }
.pu-mail-b{ display: grid; gap: 8px; padding: 12px 12px; }

@media (max-width: 560px){
  .pu-cols{ grid-template-columns: 1fr; }
  .pu-diff-row{ grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
}

/* a short stack of parts, and a plain list of names: squares, not status */
.pu-stack{ display: grid; gap: 8px; align-content: start; }
.pu-docs{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
  font-size: 12.5px; color: var(--black);
}
.pu-docs li{ display: flex; align-items: center; gap: 8px; }
.pu-docs li::before{ content: ""; flex: none; width: 6px; height: 6px; background: color-mix(in srgb, var(--ap-ink) 62%, transparent); }
.pu-sub b{ color: var(--black); font-weight: 600; }

/* a passage of several paragraphs, a state cell inside a table, a figure
   set large, and three figures that stack on a phone */
.pu-doc p + p{ margin-top: 8px; }
.pu-table .th-cell{ vertical-align: 1px; margin-right: 8px; }
.prod-ui .pu-big{
  display: block;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--black);
}

/* where a model input comes from: recorded is a filled ink square, assumed
   a filled orange one, calculated an open one — the cells' own language */
.pu-mark{
  font-size: 10.5px; font-weight: 500; line-height: 1;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ap-ink) 72%, transparent);
}
.pu-mark::before{
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px;
  background: currentColor;
}
.pu-mark.is-asm{ color: var(--ap-orange); }
.pu-mark.is-calc::before{ background: transparent; box-shadow: inset 0 0 0 1.25px currentColor; }
/* a value that a scenario changed */
.pu-table td.is-new, .pu-kv dd .is-new{ color: var(--ap-orange); font-weight: 600; }

/* an input that needed a decision before the record was prepared */
.pu-box.is-note{
  border-color: color-mix(in srgb, var(--ap-orange) 28%, transparent);
  background: color-mix(in srgb, var(--ap-orange) 6%, transparent);
}
.pu-box.is-note .pu-label{ color: var(--ap-orange); }

@media (max-width: 560px){
  .pu-list em{ white-space: normal; }
  .pu-stats.is-stack{ grid-template-columns: 1fr; }
}

/* ══ the product's own furniture ════════════════════════════════════════════
   The product pages show pieces of the product as it is: a record's header
   and tabs, the position strip, the ledger, the document review, the agent's
   thread with its steps and receipt, the drawer's preview. Same ink and
   orange; states stay cells and grey text. */
.pu-rec{ display: grid; gap: 4px; }
.pu-rec-name{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3;
  color: var(--black);
}
.pu-rec-meta{ font-size: 12px; color: var(--text-secondary); }
.pu-pill{
  display: inline-block; padding: 4px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ap-orange) 26%, transparent);
  background: color-mix(in srgb, var(--ap-orange) 6%, transparent);
  font-family: var(--font); font-size: 11px; font-weight: 500; line-height: 1.3;
  color: var(--ap-orange); white-space: nowrap;
}
.pu-tabs{
  display: flex; gap: 16px; margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ap-ink) 10%, transparent);
  font-size: 12.5px; color: var(--text-secondary);
  overflow-x: auto; scrollbar-width: none;
}
.pu-tabs li{ padding: 4px 0 8px; white-space: nowrap; }
.pu-tabs .is-on{ color: var(--black); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ap-orange); }
.pu-stats.is-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pu-stats.is-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pu-stats .pu-sub{ font-size: 11px; }
.pu-stats.is-cards b{ font-family: var(--font); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.pu-label.is-flag{ color: var(--ap-orange); }
.pu-ok{ color: var(--black); font-weight: 600; }
/* a conversation with an assistant, and the tools it used */
.pu-thread{ display: grid; gap: 8px; }
.pu-msg{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 9%, transparent);
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 12.5px; line-height: 1.3; color: var(--black);
}
.pu-msg.is-you{ background: color-mix(in srgb, var(--ap-ink) 3%, transparent); }
.pu-msg .who{
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: 4px; white-space: nowrap;
}
.pu-msg p{ margin: 0; }
.pu-msg p + p{ margin-top: 8px; }
.pu-msg mark{ background: transparent; color: var(--black); font-weight: 600; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ap-orange) 60%, transparent); }
.pu-cite{
  display: inline-block; vertical-align: 1px; margin: 0 2px; padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 12%, transparent);
  background: #FFFFFF;
  font-size: 10.5px; font-weight: 500; line-height: 1.3; color: var(--text-secondary);
  white-space: nowrap;
}
.pu-tool{
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 0 12px;
  font-family: var(--mono); font-size: 11px; line-height: 1.3; color: var(--text-secondary);
}
.pu-tool > span{ min-width: 0; overflow-wrap: anywhere; }
.pu-tool b{ font-weight: 600; color: var(--black); }
.pu-tool em{ font-style: normal; white-space: nowrap; }
/* an agent run: its steps, then the receipt and what to ask next */
.pu-run{ list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 8px; font-size: 12.5px; color: var(--black); }
.pu-run li{ display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pu-run em{ font-style: normal; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.pu-receipt{ margin: 0; font-size: 11.5px; color: var(--text-secondary); }
.pu-follow{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--black); }
.pu-follow li::before{ content: "\2192\00a0\00a0"; color: var(--ap-orange); }
.pu-actions{ display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
/* a button, as the app draws one */
.pu-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 14%, transparent);
  background: #FFFFFF;
  font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--black);
  white-space: nowrap;
}
.pu-btn.is-primary{ background: var(--ap-ink); border-color: var(--ap-ink); color: #FFFFFF; }
.pu-btn.is-accent{ background: var(--ap-orange); border-color: var(--ap-orange); color: #FFFFFF; }
.pu-btns{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the drawer's footer: what will change, what saving creates */
.pu-preview{ display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text-secondary); }
.pu-preview b{ color: var(--black); font-weight: 600; }
.pu-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.pu-chips span{ padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ap-ink) 5%, transparent); font-size: 11px; color: var(--black); }
/* the viewer's cited-page flag, and a fourth source: yours */
.pu-doc .is-cited{ margin-left: auto; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ap-orange); white-space: nowrap; }
.pu-mark.is-you{ color: var(--ap-orange); }
.pu-mark.is-you::before{ background: transparent; box-shadow: inset 0 0 0 1.25px currentColor; }
.pu-box > p{ margin: 0; }
@media (max-width: 560px){
  .pu-stats.is-4, .pu-stats.is-5{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pu-tool em, .pu-run em{ white-space: normal; }
}

/* an assumption that was something else a moment ago */
.pu-was{ color: var(--text-secondary); text-decoration: line-through; font-weight: 450; }

/* ══ a conversation that does the work ════════════════════════════════════
   The AI-action steps show the work rather than describe it: what was asked,
   the tool Floom ran, the change it prepared, the review, and the record it
   left. A dashed cell is waiting on a person; a filled one is done. */
.pu-call{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px dashed color-mix(in srgb, var(--ap-ink) 22%, transparent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.pu-call b{ color: var(--black); font-weight: 600; }
.pu-call em{
  font-style: normal; white-space: nowrap;
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ap-orange);
}
.pu-btns{ display: flex; gap: 8px; flex-wrap: wrap; }
.pu-btn{
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 16%, transparent);
  border-radius: 7px;
  background: #FFFFFF;
  font-size: 12px; font-weight: 600;
  color: var(--black);
}
.pu-btn.is-primary{ background: var(--black); border-color: var(--black); color: #FFFFFF; }
/* the one the reviewer pressed */
.pu-btn.is-pressed{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-orange) 28%, transparent); }
@media (max-width: 560px){
  .pu-call{ grid-template-columns: auto minmax(0, 1fr); }
  .pu-call em{ grid-column: 2; }
}

/* ── the product page's wider surfaces (floom-product.css frames them) ────
   A switch between two scenarios, a change taken apart into what caused it,
   and a series over time. Same ink and orange as everything above. */
.prod-ui [hidden]{ display: none !important; }
.pu-cols.is-wide-left{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.pu-cols.is-wider-left{ grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.pu-cols.is-wide-right{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.pu-seg{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-seg > span{ margin-right: 2px; }
.pu-seg button{
  height: 30px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ap-ink) 16%, transparent);
  border-radius: 7px;
  background: #FFFFFF;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pu-seg button[aria-pressed="true"]{ background: var(--black); border-color: var(--black); color: #FFFFFF; }
.pu-seg button:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 2px; }
.pu-delta{ font-weight: 600; color: var(--ap-orange); white-space: nowrap; }

/* a change, taken apart: each cause on a track that runs both ways from zero */
.pu-bridge{ display: grid; gap: 8px; }
.pu-bridge-row{
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 64px;
  gap: 12px; align-items: center;
  font-size: 12.5px;
}
.pu-bridge-row > span:first-child{ color: var(--black); }
.pu-bridge-row > b{ text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ap-orange); }
.pu-bridge-row.is-total{ padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ap-ink) 10%, transparent); font-weight: 600; }
.pu-bridge-row.is-total > b{ color: var(--black); }
.pu-bridge-row.is-up > b{ color: var(--black); }
.pu-bridge-t{ position: relative; height: 10px; }
.pu-bridge-t::before{ content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: color-mix(in srgb, var(--ap-ink) 22%, transparent); }
.pu-bridge-t i{ position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--ap-orange); }
.pu-bridge-row.is-up .pu-bridge-t i{ background: color-mix(in srgb, var(--ap-ink) 55%, transparent); }
.pu-bridge-row.is-total .pu-bridge-t i{ background: var(--black); }

/* a series over time, drawn as an svg; the base case dashed in ink, the
   scenario solid in orange */
.pu-chart{ display: block; width: 100%; height: auto; overflow: visible; }
.pu-chart text{ font-family: var(--font); font-size: 11px; fill: var(--text-secondary); }
.pu-chart .grid{ stroke: color-mix(in srgb, var(--ap-ink) 9%, transparent); stroke-width: 1; }
.pu-chart .base{ fill: none; stroke: color-mix(in srgb, var(--black) 70%, transparent); stroke-width: 2; stroke-dasharray: 5 4; }
.pu-chart .area{ fill: color-mix(in srgb, var(--black) 4%, transparent); }
.pu-chart .alt{ fill: none; stroke: var(--ap-orange); stroke-width: 2.5; }
.pu-chart .dot-alt{ fill: var(--ap-orange); }
.pu-chart .dot-base{ fill: var(--black); }
.pu-chart .col{ fill: color-mix(in srgb, var(--black) 62%, transparent); }
.pu-chart .col.is-peak{ fill: var(--ap-orange); }
.pu-chart .val{ font-weight: 600; fill: var(--black); }
.pu-chart .callout{ font-weight: 600; fill: var(--black); }
.pu-chart .callout.is-alt{ fill: var(--ap-orange); }
.pu-legend{ display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11.5px; color: var(--text-secondary); }
.pu-legend span{ display: inline-flex; align-items: center; gap: 8px; }
.pu-legend i{ width: 18px; height: 0; border-top: 2px dashed color-mix(in srgb, var(--black) 70%, transparent); }
.pu-legend i.is-alt{ border-top: 2.5px solid var(--ap-orange); }

/* a formula bar over a sheet, the cell that changed, and a key-value list read
   left to right (a review form, a cell's sources) */
.pu-fxbar{ display: flex; align-items: center; gap: 16px; }
.pu-fx{
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px; line-height: 1.3; color: var(--black);
  overflow-wrap: anywhere;
}
.pu-sheet td.is-new{ color: var(--ap-orange); font-weight: 600; }
.pu-kv-l dd{ text-align: left; }

/* ── a review that works (floom-product.js [data-pp-review]) ──────────────
   The actions are buttons set as the app sets them: quiet words in a row,
   the approving one in ink. A reading and the line it came from light
   together; a value that has just reached the record shows it arriving. */
.pu-act{
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text-secondary);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.pu-act.is-strong{ color: var(--black); font-weight: 600; }
.pu-act:hover, .pu-act:focus-visible{ color: var(--ap-orange); text-decoration-color: currentColor; }
.pu-act:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 2px; border-radius: 2px; }
.pu-field{
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.pu-field:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 2px; border-radius: 2px; }
.prod-ui tr[data-f]{ transition: background-color .2s ease; }
.prod-ui tr[data-f].is-lit{ background: color-mix(in srgb, var(--ap-orange) 7%, transparent); }
.prod-ui mark[data-f]{ transition: background-color .2s ease, box-shadow .2s ease; }
.prod-ui mark[data-f].is-lit{
  background: color-mix(in srgb, var(--ap-orange) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ap-orange) 45%, transparent);
}
.prod-ui tr[data-state="rejected"] td:nth-child(2){ text-decoration: line-through; color: var(--text-secondary); }
.prod-ui tr[data-state="rejected"] td:first-child{ color: var(--text-secondary); }
@keyframes pu-land{ from{ background: color-mix(in srgb, var(--ap-orange) 22%, transparent); } to{ background: transparent; } }
.prod-ui .is-landed{ animation: pu-land 1.4s ease-out; }
@media (prefers-reduced-motion: reduce){ .prod-ui .is-landed{ animation: none; } }
/* the saved line keeps its room while it waits, so the card does not jump
   when the last reading is decided */
.prod-ui .pu-done[data-pp-done][hidden]{ display: grid !important; visibility: hidden; }

/* ── surfaces with states (floom-product.js [data-pp-state]) ──────────────
   What arrives after an action comes in order, a little rise and a fade, so
   a thread's tool calls and answer read as a run rather than a page. A row or
   a tab that can be picked shows it; the picked one carries the orange edge. */
@keyframes pp-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.pp-in{ animation: pp-in .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--pp-d, 0ms); }
.prod-ui [data-to]{ cursor: pointer; }
.prod-ui [data-to]:focus-visible, .prod-ui [data-tip]:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 2px; border-radius: 3px; }
.prod-ui tr[data-to]{ transition: background-color .2s ease; }
.prod-ui tr[data-to]:hover{ background: color-mix(in srgb, var(--ap-ink) 3%, transparent); }
.prod-ui tr[data-to].is-on{ background: color-mix(in srgb, var(--ap-orange) 7%, transparent); }
.prod-ui tr[data-to].is-on td:first-child{ box-shadow: inset 2px 0 0 var(--ap-orange); }
.prod-ui .pu-btn[data-to], .prod-ui .pu-btn[data-replay]{ transition: border-color .2s ease, background-color .2s ease; cursor: pointer; }
.prod-ui .pu-btn[data-to]:hover, .prod-ui .pu-btn[data-replay]:hover{ border-color: var(--ap-orange); }
.prod-ui .pu-btn.is-primary[data-to]:hover{ background: var(--ap-ink); }
.prod-ui .pu-tabs li[data-to]:hover{ color: var(--black); }
.prod-ui .pu-pick{ cursor: pointer; border-radius: 9px; transition: box-shadow .2s ease, background-color .2s ease; }
.prod-ui .pu-pick.is-on{ box-shadow: 0 0 0 1.5px var(--ap-orange); background: color-mix(in srgb, var(--ap-orange) 5%, transparent); }
.prod-ui .pu-toggle{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.prod-ui .pu-toggle i{ width: 26px; height: 15px; border-radius: 8px; background: color-mix(in srgb, var(--ap-ink) 20%, transparent); position: relative; transition: background-color .2s ease; }
.prod-ui .pu-toggle i::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF; transition: transform .2s ease; }
.prod-ui .pu-toggle.is-set i{ background: var(--ap-orange); }
.prod-ui .pu-toggle.is-set i::after{ transform: translateX(11px); }

/* linked values and notes on hover */
.prod-ui [data-tip]{ cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--ap-ink) 35%, transparent); text-underline-offset: 3px; }
.prod-ui svg [data-tip], .prod-ui tr[data-tip]{ text-decoration: none; }
.prod-ui [data-l]{ transition: background-color .2s ease, box-shadow .2s ease, fill .2s ease; border-radius: 3px; }
.prod-ui [data-l].is-lit{ background: color-mix(in srgb, var(--ap-orange) 10%, transparent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ap-orange) 40%, transparent); }
.prod-ui mark[data-l].is-lit{ background: color-mix(in srgb, var(--ap-orange) 30%, transparent); }
.prod-ui tr[data-l].is-lit{ box-shadow: none; }
.prod-ui svg [data-l].is-lit, .prod-ui svg [data-tip]:hover{ fill: var(--ap-orange); }
.pp-tip{
  position: fixed; z-index: 60; max-width: 300px;
  padding: 8px 8px; border-radius: 8px;
  background: var(--black); color: #FFFFFF;
  font-family: var(--font); font-size: 12px; font-weight: 500; line-height: 1.3;
  box-shadow: 0 8px 24px rgba(24, 24, 24, .22);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ .pp-in{ animation: none; } }
/* a measure that can be picked: the picked bar keeps its orange, the rest go
   to ink */
.prod-ui .pu-bar[data-to]{ padding: 4px 8px; margin: -4px -8px; border-radius: 6px; transition: background-color .2s ease; }
.prod-ui .pu-bar[data-to]:hover{ background: color-mix(in srgb, var(--ap-ink) 3%, transparent); }
.prod-ui .pu-bar[data-to].is-on{ background: color-mix(in srgb, var(--ap-orange) 7%, transparent); }
.prod-ui .pu-bar[data-to]:not(.is-on) .pu-bar-t i{ background: color-mix(in srgb, var(--ap-ink) 38%, transparent); }
/* a chart's hover columns: invisible until pointed at */
.pu-chart .hit{ fill: transparent; }
.prod-ui svg .hit[data-tip]:hover, .prod-ui svg .hit[data-tip]:focus{ fill: color-mix(in srgb, var(--ap-ink) 5%, transparent); outline: none; }