/* tokens.css
 *
 * The brand tokens, transcribed from EDGE_AdvisorPortal_UIMockup_v2_37.html,
 * which is the visual contract for this rebuild.
 *
 * ONE COPY. The mockup carries five duplicated stylesheet blocks, which is how
 * it came to need eighteen separate edits to fix one colour bug across seven
 * classes. There is one block here and there will stay one.
 *
 * EVERY VALUE-BEARING TEXT CLASS SETS ITS OWN COLOR EXPLICITLY.
 * Inheriting from body is correct CSS and is not enough: a rendering
 * environment that darkens or inverts elements lacking a per-element color
 * declaration will not respect an inherited one, which is what made the
 * engagement page's figures render as near invisible pale text. Any class that
 * carries a number or a name declares color directly.
 */

:root {
  /* Brand, EDGE_DesignLanguage v1_3 */
  --green: #7aac33;
  --lime: #d0ed65;
  --cream: #f5f2ec;
  --slate: #596d7b;
  --dark: #3a4a55;
  --coral: #fb7e58;
  --topbar: #2f3e49;

  /* Surfaces */
  --border: #dde3e8;
  --tint: #f0f3f5;
  --green-tint: #f2fce8;
  --paper: #ffffff;

  /* Side colours. --buy is introduced for this system; --sell reuses the brand
   * green rather than adding a second hue, and matches the legacy portal's own
   * green Open Listing button, which was observed rather than invented. */
  --buy: #3b6ea8;
  --buy-tint: #eaf1f8;
  --sell: var(--green);
  --sell-tint: var(--green-tint);

  /* Status */
  --status-caution: #f5a623;
  --status-caution-bg: #fdf3e0;
  --status-caution-text: #c07800;
  --status-pass: #7aac33;
  --status-pass-bg: #f2fce8;
  --status-pass-text: #4c7317;
  --status-error: #d64545;
  --status-error-bg: #fbecec;
  --status-error-text: #a83333;

  --uptick: linear-gradient(90deg, var(--green), var(--lime));

  /* Metrics. The rail widened from 216 to 240 to carry the mini dashboard. */
  --rail-w: 240px;
  --content-max: 1080px;

  /* ⚠️ ONE SIZE FOR EVERY PAGE TITLE, and it is a token so it is one number to
   * change rather than a value to find in two stylesheets. See the rule in
   * app.css for why this exists and how the number was chosen. */
  --title-size: 28px;
}

/* CORAL IS FOR EDITABLE INPUT TEXT AND NOTHING ELSE.
 * Standing design-language rule. It is not a highlight, not an accent, and not
 * an error colour. If a value is typed by a person it renders coral; if it is
 * computed or stored it does not. Stated here because the rule is invisible in
 * a stylesheet and gets broken by whoever wants an accent next. */
input,
select,
textarea,
.editable {
  color: var(--coral);
}

/* ⚠️ A FORM CONTROL NEVER EXCEEDS THE COLUMN IT SITS IN. 16 September 2026, from
 * a screenshot Benjamin sent of the EDGE Engagement Team panel with the Assign
 * button drawn on top of the select beneath it.
 *
 * Until today the only rule in this estate for an input, a select or a textarea
 * was the colour above. A <select> takes its intrinsic width from its LONGEST
 * OPTION, and the owner picker's options are "Name | email@buyselledge.com", so
 * in the narrow record column it was wider than its container. `.row .grow`
 * carries `flex: 1; min-width: 0`, which lets the FLEX ITEM shrink but cannot
 * make the select inside it shrink, so the control overflowed and the sibling
 * button was painted over the top of it.
 *
 * ⚠️ MEASURED BEFORE AND AFTER, not eyeballed: six real pages rendered from the
 * shipping code at a 1280 viewport, giving a 325px record column. NINE overflows,
 * every one a `select.inp`, the worst 167px past its container. The whole class
 * is one missing constraint.
 *
 * ⚠️ AND THE TABLE HALF OF THAT SCREENSHOT IS THE SAME SHAPE, differently caused:
 * `table.t` is `table-layout: fixed`, so a long unbreakable string like an email
 * address does not wrap, it spills into the next column. That is the email
 * running under ROLE HERE. Wrapping anywhere is right for a cell that may hold an
 * address; it is not right for the numbers, which have no break opportunities and
 * are unaffected. */
input,
select,
textarea {
  max-width: 100%;
}
table.t th,
table.t td {
  overflow-wrap: anywhere;
}