/* COPIED VERBATIM from bullet-web-frontend/src/styles/components/dashboard.css (Peter, 26 Sep 2026): the two blocks
   Signal uses, "WHAT NEEDS YOU" (.needs, lines 19-138) and "THE CARD GRID" (.dgrid / .dcard, lines 654-811).
   Tokens bridged in app-tokens.css. If the app changes them, copy them over again. Do not fork them. The only change: em dashes in comments became commas (house rule). */

/* --------------------------------------------------------------------------
   WHAT NEEDS YOU
   The most valuable card on the screen. One card, one row per job, count
   leading so the eye lands on the number. Rows are real links to the
   pre-filtered destination, never a dead label.
   -------------------------------------------------------------------------- */
.needs {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.needs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.needs__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font: inherit;
  text-align: left;
  transition: background .15s ease;
}

.needs__list > li + li .needs__row { border-top: var(--border-width) solid var(--color-border); }

.needs__row:hover { background: var(--color-bg-subtle-light); }
.needs__row:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }

/* ONE SIZE HERE TOO (Peter, 28 Jul), the jobs list carried three of them, which
   is what made the card read busy next to the others. Everything is 16px regular
   now and colour does the work: the count is the only thing at full strength, so
   the eye still lands on it without it being bigger or bolder than the job. */
.needs__count,
.needs__label,
.needs__sub {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* The count leads, tabular so the column stays straight down the list */
.needs__count {
  flex: none;
  min-width: 34px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* The count and the job read as ONE dark statement, "22 transactions missing
   their paperwork", with the explanation muted under it. Same rule as the
   sentence cards: what matters is the dark thing, not the big thing. */
.needs__label {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
}

/* Second line under the label, what tapping it does. Optional. */
.needs__sub {
  display: block;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.needs__go {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform .15s ease;
}
.needs__row:hover .needs__go { transform: translateX(2px); color: var(--color-text); }

/* An overdue row used to turn its count red. Black like the rest now (Peter, 28 Jul) -
   the row says what it is in words, which is what people actually read. */
.needs__row--urgent .needs__count { color: var(--color-text); }

/* EMPTY, say it plainly. Most dashboards never tell you nothing needs you,
   and it's the most reassuring thing this screen can display (Peter, rule 4).
   Same calm register as the tax calendar's caught-up months. */
.needs--clear { border-color: var(--color-border); }

.needs__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 44px;
}

.needs__empty-tick {
  width: 44px;
  height: 44px;
  color: var(--color-success);
  margin-bottom: 16px;
}
.needs__empty-tick svg { width: 100%; height: 100%; }

.needs__empty-title {
  font-size: var(--text-section);
  font-weight: var(--weight-medium);
  margin-bottom: 6px;
}

.needs__empty-sub {
  color: var(--color-text-muted);
  max-width: 360px;
}

/* ==========================================================================
   THE CARD GRID (Peter, 28 Jul, midday's calm, our anatomy)
   Home's sections became a grid of cards, every one of them the same shape:

     label · one plain sentence with the number bold inside it ·
     a quiet comparison underneath · a quiet link at the bottom

   The link stays a link, the card is NOT clickable (Peter's call). Two up on
   desktop, one on a narrow screen; the list and the chart span both columns.
   The bottom link is the shared .answer__link the Ask answers use, so the way
   out of a card looks the same everywhere on this screen.
   ========================================================================== */
.dgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr; } }

.dcard {
  display: flex;
  flex-direction: column;
  /* Content sits on WHITE, never the pink page token. */
  background: var(--color-surface);
  /* MODERNISED (Peter, 31 Jul, Mariana: "a little dated"): the hairline box
     becomes soft elevation. A bordered box on white reads admin-panel; a card
     floating on two gentle shadows is the contemporary read (the Sana
     comparison). The faint outline keeps the edge crisp on bright screens. */
  border: var(--border-width) solid rgba(17, 17, 17, 0.04);
  border-radius: var(--radius-md);
  /* dialled back ~20% (Peter, 31 Jul: 'very nice though, just reduce about 20%') */
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.032), 0 12px 32px -18px rgba(17, 17, 17, 0.11);
  /* ROOM (Peter, 30 Jul). 20px made four cards in a row read as a dense block;
     the screens he keeps pointing at are mostly air inside the card. */
  padding: 26px;
}
/* The jobs list needs the full row, every row is a different job going to a
   different screen, so it cannot collapse into a column. */
.dcard--wide { grid-column: 1 / -1; }
/* Two columns: wide enough for a chart, narrow enough not to leave a band of
   empty white across the screen (Peter, 30 Jul). */
.dcard--half { grid-column: span 2; }
@media (max-width: 640px) { .dcard--half { grid-column: auto; } }

/* THIS WEEK SITS BESIDE WHAT NEEDS YOU (Peter, 30 Jul), and What needs you keeps
   its two columns. So This week takes column three THROUGH THE END of the row
   rather than a fixed span: at four columns it fills 3-4, at three columns it
   fills 3 alone, and either way it closes the row so In the bank starts a clean
   one underneath. A fixed span would drop it under What needs you the moment the
   grid handed out an odd number of columns, which is what happened. */
/* 1280 not 1200: right at the 3-column boundary the grid was still handing out
   two, and `3 / -1` then invented a narrow third column that did not line up with
   the cards underneath. Above 1240 there are genuinely three or more. */
@media (min-width: 1280px) { .dcard--week { grid-column: 3 / -1; } }

/* ONE SIZE, AND COLOUR DOES THE WORK (Peter, 28 Jul).
   The cards read busy because each one mixed three type sizes and shouted its
   figures in bold. Now every line in a card is the SAME size and the same
   regular weight, the sentence sits back in muted ink and only the figure
   steps forward, in full-strength text. Nothing is bold, nothing is bigger:
   the eye finds the number because it is the only dark thing in the sentence. */
.dcard__label,
.dcard__line,
.dcard__sub {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

/* The card's NAME is the exception: full weight, standard black (Peter, 28 Jul). It is a
   heading, and at one type size a heading has to hold its place by weight and colour or it
   reads as another line of the sentence. Everything under it stays regular and muted. */
.dcard__label {
  margin: 0 0 10px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
.dcard__line { margin: 0; }
.dcard__sub { margin: 6px 0 0; }

/* THE SENTENCE IS THE QUESTION (Peter, 29 Jul).
   A real button so it is reachable by keyboard and announced as one, but it has
   to LOOK like the sentence it is, not a control. No underline until you go for
   it: the hover treatment is the whole affordance, the same way a client name
   behaves on the invoice screens. */
.dcard__ask {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 3px;
}
/* A sentence in the quiet line under the figure is part of a running line, two
   facts separated by a "·" have to stay on that line, so the button goes inline
   and wraps with the text like the words around it. */
.dcard__sub .dcard__ask { display: inline; width: auto; }
/* THE UNDERLINE GOES ON THE SMALL PRINT, NOT THE BUTTON (Peter, 30 Jul, asked
   three times, and the first two fixes could never have worked).

   text-decoration set on an ancestor is PAINTED THROUGH its descendants. A child
   cannot take it off: `.dcard__big { text-decoration: none }` computes to none and
   the line is still drawn straight through the number. The only fix is not to put
   it on the parent at all.

   So the button carries no underline and the line under the figure, the sentence
   part, carries it instead. The number is never touched, at any depth. */
.dcard__ask:hover .dcard__under,
.dcard__ask:focus-visible .dcard__under { text-decoration: underline; text-underline-offset: 3px; }
/* NEVER UNDERLINE THE FIGURE (Peter, 30 Jul): "the 129 just looks odd when they
   get moved". A rule under a number reads as part of the number, it can look like
   a strike-through or a fraction, and the sentence above it already shows the
   line, which is all the hover needs to say. */

.dcard__ask:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* The figure, the only thing in the card at full strength. Applies in the
   comparison line too: a figure there was rendering browser-default BOLD and
   stood out from every other number on the screen (Peter, 29 Jul). */
.dcard__line strong,
.dcard__sub strong {
  font-weight: var(--weight-regular);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
/* NO RED, NO GREEN ON HOME (Peter, 28 Jul). Black text only: the figures already
   step forward against the muted sentence around them, and a screen that answers
   "am I okay?" should not colour-code the answer before you have read it. So the
   overdue amount and the claimed-back amount are the same ink as every other
   figure, full-strength text against muted words. */
.dcard--good .dcard__line strong { color: var(--color-text); }
.dcard__over { color: var(--color-text); }

/* Pin the link to the bottom edge so two cards side by side line their links up,
   however long the sentence above runs. It is SMALLER than everything else in the
   card (answer.css), a sub-call to action, not information. It used to be pulled
   back to --text-base by the one-size rule above, which is why it competed with
   the line explaining the card. */
.dcard .answer__link { margin-top: auto; padding-top: 16px; }
.dcard .answer__link:hover { color: var(--color-text); }

/* The jobs list keeps its own rows but drops its border, inside a card it
   would be a box in a box. Rows run edge to edge under the label. */
.dcard--list { padding: 20px 0 4px; }
.dcard--list .dcard__label { padding: 0 20px; margin-bottom: 12px; }
.dcard--list .needs { border: 0; border-radius: 0; background: none; }
.dcard--list .needs__row { padding: 14px 20px; }
.dcard--list .needs__more { margin-left: 18px; }

/* Same reason the jobs list drops its border: the chart is already inside a card. */
.dcard .inout { border: 0; border-radius: 0; background: none; padding: 12px 0 0; }