/* Invoicing Control - Incognitus theme.

   NAVY CHROME, INCOGNITUS RED. Andres, 23 Sep 2026: "algo mas como un azul,
   para no hacerlos todos de negro y generar mas confusion".

   The dashboards portal is near-black (its manifest theme_color is the same
   #20201E this file started from), and two black portals side by side are two
   tabs nobody can tell apart. So the CHROME moves to navy - sidebar, primary
   buttons, the progress bar, the tab pills - and that is what makes this app
   recognisable at a glance.

   THE ACCENT STAYS RED, deliberately. #E31837 is Incognitus: it is the red in
   the wordmark and it IS the mark in app/assets/mark.png. Turning the accent
   blue as well would have left the logo as the only red thing on screen,
   reading as a leftover rather than as the brand. Red also still carries
   meaning here - over budget, "Not in SAP", Delete - and a blue accent would
   have competed with it.

   So: blue says WHICH APP, red says WHOSE. One line below switches the accent
   if that judgement turns out wrong. */

:root {
  --red: #E31837;
  --red-dark: #B0122B;
  --ink: #20201E;
  --ink2: #4a4a48;
  --grey: #827F7F;
  --line: #E6E4E1;
  --paper: #F7F6F5;
  --white: #ffffff;
  /* Not var(--ink) any more: the chrome and the body text are now different
     colours, and conflating them is what made every screen black. */
  --brand: #14314F;
  --accent: var(--red);
  --radius: 12px;
  --shadow: 0 12px 40px -22px rgba(32, 32, 30, .25);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* An author rule with display: beats the HTML hidden attribute, which is how a
   panel ends up visible to someone who should not see it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3 { font-weight: 200; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 26px; }
h1 b, h2 b { font-weight: 600; }

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.dim { color: var(--grey); font-size: 12px; }
.sub { color: var(--ink2); margin: 6px 0 0; }
.over { color: var(--red-dark); font-weight: 600; }

/* ---- form controls ------------------------------------------------------
   Written as "every input except the odd ones out" on purpose: most fields in
   these apps are <input id="x"> with no type attribute, so a rule keyed on
   input[type=text] silently misses them. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(227, 24, 55, .12);
}

textarea { resize: vertical; }

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}

label > input, label > select, label > textarea { margin-top: 4px; font-weight: 400; }

label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--ink);
  margin: 4px 0;
}
label.check input { width: auto; margin: 0; }

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin: 12px 0 0;
}
fieldset legend { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
fieldset.off { opacity: .45; }

.hint { display: block; margin-top: 6px; font-weight: 400; color: var(--grey); font-size: 12px; }

/* auto-fill, not auto-fit: with auto-fit a three-field row stretches to the
   full panel width and looks broken. */
.row-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;      /* with end, a two-line label knocks its neighbours out of line */
  margin-top: 12px;
}

.full { grid-column: 1 / -1; display: block; margin-top: 12px; }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ---- buttons ------------------------------------------------------------ */

button {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  padding: 8px 14px;
}
button:hover { border-color: var(--grey); }

button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
  font-weight: 600;
}
/* A DARKER NAVY, not #000. The hover used to go to black, which was
   invisible against a near-black button and is a jarring jump from navy. */
button.primary:hover { background: #0C2238; border-color: #0C2238; }

button.ghost { background: transparent; }

button.small { padding: 4px 10px; font-size: 12px; }

button.link {
  border: none;
  background: none;
  color: var(--accent);
  padding: 2px 4px;
  text-decoration: underline;
}
button.link.danger { color: var(--red-dark); }

button.chip {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  background: var(--paper);
}

button.tab {
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  background: var(--white);
}
button.tab.on { background: var(--brand); border-color: var(--brand); color: var(--white); font-weight: 600; }

.back { margin-bottom: 8px; display: inline-block; }

/* ---- pills --------------------------------------------------------------- */

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line);
  white-space: nowrap;
}
/* ONE COLOUR PER STATUS. Andres, 23 Sep 2026.

   "Sent from Accounts", "In the system SAP" and "To Modify" all used to be
   the same amber, and those three are exactly the ones that have to be told
   apart at a glance down a column of forty rows.

   They read left to right as the invoice's life - pink not started, amber
   waiting, blue sent, indigo keyed into SAP, green paid - with orange off to
   the side for the one that has come back, and grey struck through for the
   one that counts for nothing. Every pair differs in LIGHTNESS as well as
   hue, so red-green colour blindness (about one man in twelve, and this is an
   ops screen read all day) still leaves them distinguishable; the status word
   is written in the pill regardless, so no colour is ever the only carrier of
   the fact. */
.pill-new { background: #fff4f6; border-color: #f3cdd5; color: var(--red-dark); }
.pill-waiting { background: #fff8e8; border-color: #efdcae; color: #8a6a12; }
.pill-sent { background: #eef4fd; border-color: #c2d6f2; color: #1f4e8c; }
.pill-insap { background: #f1eefb; border-color: #cfc4ec; color: #4b3a90; }
.pill-modify { background: #fff0e6; border-color: #f3ccaa; color: #9a4a10; }
.pill-done { background: #eef7f0; border-color: #c5e0cc; color: #2c6b40; }
/* ---- the same statuses, as CHART BARS -----------------------------------
   Andres, 23 Sep 2026: the dashboard is two charts now.

   NOT the pill colours. A pill is a pale tint with a dark word inside, so the
   word does the work; a bar is a solid block of colour a metre of screen away
   from its neighbour, and the pill tints fail badly as bars - the validator in
   the dataviz skill put "Sent from Accounts" and "In the system SAP" at
   deltaE 7.2 in NORMAL vision, which is a hard fail, and those two are exactly
   the pair somebody scanning the chart needs to tell apart.

   So these were re-stepped and run through
   `node scripts/validate_palette.js` until both sides passed:

     customer (7)  lightness PASS, CVD PASS (worst adjacent 8.0 deutan),
                   normal-vision PASS (worst 20.1), contrast PASS
     supplier (4)  lightness PASS, CVD PASS (worst 12.1), normal-vision PASS
                   (worst 15.5), contrast PASS

   BOTH LISTS, because the supplier side shows a SUBSET and a subset changes
   which bars sit next to each other. With the orange gone from between them,
   Paid and Cancel became neighbours and failed at 11.1 - a problem the
   seven-colour check could not see. That is why Cancel is this particular
   slate and not the obvious grey.

   The one check that still fails is the chroma floor on Cancel, deliberately:
   it is the status that counts for nothing, reading as a neutral is the point,
   and every bar carries its name and its number as text so no meaning is ever
   carried by colour alone. */
.bar-new     { background: #C62134; }
.bar-waiting { background: #9C8412; }
.bar-sent    { background: #1B5FA8; }
.bar-insap   { background: #9B7BE0; }
.bar-done    { background: #00897B; }
.bar-modify  { background: #CF5C1E; }
.bar-void    { background: #4A5568; }

/* Kept for the pills that are NOT statuses - "Other cost centres", "Not asked
   for", "Invited - not signed in yet". Those are the screen's own words about
   something else, and they have no status object to carry a tone. */
.pill-progress { background: #fff8e8; border-color: #efdcae; color: #8a6a12; }
/* Cancelled. Grey and struck through, because it has to be legible as a
   record while reading as clearly NOT one of the live ones - it counts for
   nothing in any total on the screen. */
.pill-void { background: var(--paper); border-color: var(--line); color: var(--grey); text-decoration: line-through; }
.pill-all { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---- charts -------------------------------------------------------------
   Horizontal bars, built out of divs. No chart library and no SVG: these are
   category counts with long names, which is the one shape plain HTML does
   well, and it keeps the page dependency-free like the rest of the portal.

   Rows are name / bar / number, and the name and the number are real text.
   That is the "table view" the chart needs to be accessible, rather than a
   second copy of the data hidden behind a toggle - and it is what makes the
   one palette check that lands in the 6-8 band legal, since identity never
   rests on the colour. */
.chart { margin-top: 6px; }
.chartrow {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
}
.chartrow .label { font-size: 12px; color: var(--ink2); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.chartrow .track { display: block; background: var(--paper); border-radius: 5px; height: 16px; overflow: hidden; }
/* display:block, and that is not a detail. These are spans, and an inline
   span ignores height - the first version drew every bar as an empty grey
   track with no colour in it at all. The grid blockifies .track because it is
   a grid item; .fill is not one, so it has to say so itself. */
.chartrow .fill { display: block; height: 100%; border-radius: 0 5px 5px 0; min-width: 2px; }
.chartrow .n { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; min-width: 2.2em; text-align: right; }
.chartrow .money { font-size: 11px; color: var(--grey); font-variant-numeric: tabular-nums; }
/* A row at zero still shows its name and its 0: a status missing from the
   chart would read as "there is no such status". */
.chartrow.zero .label, .chartrow.zero .n { color: var(--grey); font-weight: 400; }

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
  align-items: start;
}
.chartcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 16px 18px 18px; }
.chartcard h3 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.chartcard .capt { color: var(--grey); font-size: 12px; margin: 0 0 12px; }

/* The before/after list inside an audit row. Stacked rather than a nested
   table: most entries move one or two fields, and a table inside a table for
   two lines is heavier than the thing it describes. */
.chg { font-size: 12px; line-height: 1.7; }
.chg b { font-weight: 600; color: var(--ink2); }

/* ---- tables -------------------------------------------------------------- */

table.grid {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
table.grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
table.grid td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid .num { text-align: right; white-space: nowrap; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover { background: #fbfaf9; }
table.grid.tight td, table.grid.tight th { padding: 6px 12px; }
.tablewrap { overflow-x: auto; }
.tablewrap table.grid { min-width: 100%; }
/* The wording is the one free-text column and it will happily eat the table.
   A ceiling stops it pushing everything else off the right-hand edge - and it
   is what makes eight columns fit.

   ONE LINE, cut with an ellipsis. A wording can run to a paragraph, and left
   to wrap it made a single row six hundred pixels tall with every other cell
   stranded at the top of it. Cut by WIDTH rather than by a character count:
   the column is 220px whatever is in it, so a width cut fills the space it
   has, where "the first 15 characters" would leave most of it empty and still
   not tell two rows apart. The full text is on hover, and on the edit form. */
table.grid .wording {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On a narrower desktop this column gives up width first. It is the only one
   whose content is a summary rather than a fact - every other cell would be
   losing a figure or an id, whereas this one just shows fewer words of
   something you can read in full on hover or on the edit form. */
@media (max-width: 1699px) {
  table.grid .wording { max-width: 150px; }
}
@media (max-width: 1399px) {
  table.grid .wording { max-width: 128px; }
  /* Two pixels of padding a side, across ten columns, is forty pixels of
     table - and it is the last thing anybody notices. Cheaper than taking
     width off a column that is carrying a figure. */
  table.grid td, table.grid th { padding-left: 8px; padding-right: 8px; }
}
/* And on a wide one it takes the room back. Now that the page fills the
   screen the spare width has to go somewhere, and every other column is
   either a fixed-shape figure or an id - this is the only cell where more
   width means more of something worth reading. */
@media (min-width: 1700px) {
  table.grid .wording { max-width: 420px; }
  table.grid td.party { max-width: 280px; }
}

/* The customer and its contact. A contact email runs to forty characters and
   would otherwise set the column's width on its own, so this one is allowed
   to wrap. */
table.grid td.party { min-width: 128px; max-width: 190px; }
/* Who added it. A name, not an address - the address is on hover. Capped
   because a long one would take width from the columns carrying figures, and
   allowed to WRAP rather than be cut: a name in two lines is still a name,
   and the row is two or three lines tall already. */
table.grid td.who, table.grid th.who { max-width: 130px; }
/* A supplier invoice with no document attached. It should not exist - the
   form refuses to create one - so this is for records from before the rule,
   and it is meant to be noticed. */
.warn-inline { color: var(--red-dark); font-weight: 600; font-size: 12px; }
/* The HEADER is capped too, and that is the part that matters: "ADDED BY" in
   letter-spaced capitals is wider than any name under it, so capping only the
   cells left the column exactly as wide as the word. The same trap that made
   "PO / INVOICE DOCUMENT" a 150px column an hour earlier - a heading is
   content, and it sets a column's width like any other. */
@media (max-width: 1399px) {
  table.grid td.who, table.grid th.who { max-width: 82px; }
}
table.grid td.party .dim { word-break: break-word; }

/* The three money figures in one cell: ex GST on the line, the other two
   under it. They are arithmetic on each other, so stacked reads better than
   three columns spread apart - and it buys back two columns. */
table.grid td.money strong { display: block; font-weight: 600; }
table.grid td.money .dim { display: block; font-size: 11px; line-height: 1.35; }
table.grid td.money .gstmode { color: var(--red-dark); font-weight: 600; }

/* PO over the invoice document, each with its own tiny label - two unlabelled
   boxes in one cell are indistinguishable. */
table.grid td.refs { white-space: nowrap; }
/* A twelve-digit document number in a monospace box is what sets this
   column's width. One point smaller keeps it legible and buys the last few
   pixels the table needed at 1280. */
table.grid td.refs code { font-size: 11px; padding: 1px 4px; }
table.grid .refline { display: flex; align-items: center; gap: 4px; }
table.grid .refline + .refline { margin-top: 4px; }
table.grid .reflabel {
  flex: 0 0 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
}
table.grid .nowrap { white-space: nowrap; }
/* Without a floor the project name shreds into one word per line. */
table.grid td:nth-child(2) { min-width: 120px; }
/* Edit above Delete, not beside it. Side by side the two of them set this
   column's width between them, and Delete only ever appears on a row still at
   its opening status - a rare button should not widen every row. */
table.grid td.actions { text-align: left; }
table.grid td.actions button { display: block; margin: 0; }
table.grid td.actions button + button { margin-top: 4px; }
table.grid td.actions button.link { padding-left: 0; }
/* The picker with Delete under it, not beside it - side by side they set the
   column's width between them. */
/* The status pill may wrap below 1700px. "In the system SAP" on one line is
   a 155px column for eleven characters of information; on two lines it is 90,
   and the row is already two lines tall from the amount. Above that width
   there is room for it to stay on one. */
table.grid td.statuscell { white-space: normal; }
table.grid td.statuscell .pill { white-space: normal; }
@media (min-width: 1700px) {
  table.grid td.statuscell, table.grid td.statuscell .pill { white-space: nowrap; }
}
/* The status picker in the actions column. Sized to its own content - the
   base width:100% rule would make it as wide as the column. */
/* The actions column: Edit, and Delete only while the invoice is still at
   its opening status. */
table.grid td.actions button.small { padding: 3px 10px; }
/* A cancelled invoice stays readable but stops competing with the live rows.
   Not display:none - the record is still a record. */
table.grid tr.voided td { opacity: .55; }
/* The status and the actions stay at full strength on a cancelled row: the
   status is how somebody sees it was cancelled, and both are how they undo
   it. Dimming the way out of a state is a trap. */
table.grid tr.voided td.actions,
table.grid tr.voided td.statuscell { opacity: 1; }

/* "Not in SAP yet" in the document field. Coloured so it reads as a STATE
   rather than as a greyed-out value - the same red this portal already uses
   for the New pill, because it is the same fact. Only this field: a grey
   placeholder is right everywhere else, where an empty box means nothing has
   been typed rather than something is not true yet. */
input.notinsap::placeholder { color: var(--red-dark); font-weight: 600; opacity: 1; }

/* ---- panels and blocks --------------------------------------------------- */

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
  margin-top: 18px;
}

.head { margin-bottom: 18px; }

/* A heading with an action on the right - the New button. align-items: start
   keeps the button level with the title rather than floating beside a
   two-line subtitle. */
.headrow {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.headrow > div { min-width: 0; }
.headrow button { flex: 0 0 auto; }

.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* flex: 0 0 auto, or the base width:100% makes the search box eat the row and
   push the cost-centre picker onto a second line. */
.filters input { flex: 0 0 300px; width: 300px; }
.filters select { flex: 0 0 auto; width: auto; min-width: 220px; }
.filters .count { color: var(--grey); font-size: 12px; margin-left: auto; }

/* The event / customer / status dropdowns. Each carries its own small label
   above it: three unlabelled selects side by side are a guessing game, and
   the event names are long enough that the chosen VALUE does not always say
   which field it came from. */
.pickfilter { display: flex; flex-direction: column; gap: 2px; margin: 0; flex: 0 1 auto; min-width: 0; }
.pickfilter > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grey);
}
/* Capped, not fixed. An event option runs to "INCA144 - 2026.09 NSWO Accor
   Stadium September (12)" and would otherwise stretch the row off the screen;
   the browser ellipsises the option text inside the box and shows the whole
   thing in the open list. */
.pickfilter select { min-width: 190px; max-width: 300px; }
/* The search box is inside a .pickfilter too now, so it needs its width back:
   the .filters input rule above no longer reaches it through the label. */
.pickfilter input { flex: 0 0 auto; width: 260px; }
/* Bottom-aligned with the selects, which sit under their labels. */
.filters #invClear, .filters [id$="Clear"] { align-self: flex-end; }

/* Access matrix on the Users screen: document types down, regions across. */
table.matrix { border-collapse: collapse; margin-top: 8px; }
table.matrix th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 6px 14px;
  text-align: center;
  white-space: nowrap;
}
table.matrix tbody th { text-align: left; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }
table.matrix td { padding: 4px 14px; text-align: center; }
table.matrix td label.check { justify-content: center; margin: 0; }

table.grid tr.editing { background: #fbfaf9; box-shadow: inset 3px 0 0 var(--accent); }
/* The edit form opens under its own row, spanning the table. It is a form,
   not a cell, so it gets the breathing room a form needs rather than the
   table's tight padding. */
table.grid tr.editing > td { padding: 4px 18px 18px; }
table.grid .editform .row-form { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
table.grid .editform .form-actions { margin-top: 14px; }

/* What each person can see, in the Users list. */
.accessrow { margin-bottom: 4px; }
.accesstype { display: inline-block; min-width: 128px; font-size: 12px; color: var(--ink2); }

/* The event picker that leads a region screen. Wide on purpose: these names
   run to forty characters and a narrow select truncates the useful half. */
.picker { margin-top: 16px; }
.picker label { margin-bottom: 4px; }
.picker select { max-width: 620px; }

/* Dashboard: the count line and its status chips, one row per document type. */
.dashline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.dashcount { color: var(--ink2); font-size: 13px; }
.dashchips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.totals, .calc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
/* Four figures rather than three, and each carries a line of small print
   saying which SAP number it is - without that they read as four amounts
   that ought to add up, and they do not. */
.totals.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.totals strong, .calc strong { display: block; font-size: 20px; font-weight: 300; margin-top: 2px; }
.totals .dim { display: block; margin-top: 2px; }
/* A date range does not fit at 20px next to two currency figures. */
.totals strong.small-strong { font-size: 14px; }
.calc { margin-top: 14px; padding: 12px 14px; background: var(--paper); border-radius: 8px; }
/* With no amount typed there is nothing to work out, and the padded box on its
   own reads as a broken empty field. */
.calc:empty { display: none; }
.calc .full { grid-column: 1 / -1; margin-top: 0; }

.bar {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}
.bar span { display: block; height: 100%; background: var(--brand); }
.bar.bar-over span { background: var(--red); }

.note { color: var(--ink2); margin: 14px 0 0; font-size: 13px; }
.empty { color: var(--grey); margin: 18px 0; }
.warn { color: var(--red-dark); font-weight: 600; margin: 12px 0 0; }
.error { color: var(--red-dark); font-weight: 600; margin: 12px 0 0; }