/* --------------------------------------------------------------------------- reports
 *
 * A standing report. It borrows the answer screen's type scale and rules rather than
 * introducing a second visual language for the same numbers — what differs is density: an
 * answer is read once, a report is scanned every week, so the rows pack tighter and the tree
 * is carried by indentation instead of by headings.
 */

.dossier {
  max-width: var(--canvas);
  margin: 0 auto;
}

.dossier-header {
  border-bottom: var(--rule-strong);
  padding-bottom: var(--s-tight);
  margin-bottom: var(--s-prose);
}

.dossier-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

/* The reference week. Quiet, but never absent: a reader who assumes "this week" when the
   data is a week behind draws exactly the wrong conclusion from every row below. */
.dossier-when {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0.5rem 0 0;
}

.dossier-takeaway {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--ink);
  margin: 0 0 var(--s-prose);
}

.dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.dossier-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding: 0 0 var(--s-tight);
  border-bottom: var(--rule);
  white-space: nowrap;
}

.dossier-table thead th.dossier-metric { text-align: left; }

.dossier-row th,
.dossier-row td {
  padding: var(--s-tight) 0;
  border-bottom: var(--rule);
  vertical-align: baseline;
}

.dossier-metric {
  text-align: left;
  font-weight: 400;
  padding-right: var(--s-prose);
}

/* The tree, carried by indentation. Depth also lightens the name, so a parent reads as the
   subject and its children as the breakdown without a second type size for each level. */
.depth-1 .dossier-metric { padding-left: 1.5rem; }
.depth-2 .dossier-metric { padding-left: 3rem; }
.depth-3 .dossier-metric { padding-left: 4.5rem; }

.dossier-name {
  display: block;
  color: var(--ink);
}

.depth-0 .dossier-name { font-weight: 600; }
.depth-2 .dossier-name,
.depth-3 .dossier-name { color: var(--ink-2); }

/* The metric's own definition. It is what stops "DAD" and "Consumer DAD" reading as the same
   number written twice — but it is reference, not the point, so it stays small and clipped. */
.dossier-note {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 42ch;
  margin-top: 0.15rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Figures line up in columns, so they need to be the same width per digit. Without this the
   eye cannot compare two numbers by their shape, which is most of what scanning a column is. */
.dossier-value,
.dossier-change {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  padding-left: var(--s-prose);
}

.dossier-value { font-weight: 600; color: var(--ink); }

/* Direction is carried by the sign first and colour second — the sign is in the text, so a
   reader who cannot separate these two hues loses nothing. */
.dossier-change.is-up { color: var(--slate); }
.dossier-change.is-down { color: var(--caution); }

.dossier-trust { text-align: right; padding-left: var(--s-tight); }

/* A week that did not fully arrive. The one case where the most alarming figure on the page
   is also the least real, so it is marked in the row rather than in a footnote. */
.dossier-flag {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--caution);
  background: var(--caution-tint);
  border: 1px solid var(--caution);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.dossier-prose {
  margin-top: var(--s-section);
  max-width: var(--measure);
}

.dossier-prose-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-tight);
}

.dossier-prose ul {
  margin: 0;
  padding-left: 1.1rem;
}

.dossier-prose li {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.dossier-prose.is-up li::marker { color: var(--slate); }
.dossier-prose.is-down li::marker { color: var(--caution); }

.dossier-waiting {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-3);
  max-width: var(--measure);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------- the shelf
 *
 * The standing work, at the width of the box above it — `--pill`, not `--canvas`, so the
 * cards line up under the composer that produced them. A section aligned to nothing in
 * particular is what made this read as a dashboard. Carried over from
 * `design/specimen.html`, which specified it before it was ever built.
 */

.home-extras {
  /* Centred on the composer, not left-aligned in the canvas. The box above is `--pill` wide
     and centred; a section that starts at the canvas edge instead reads as a second, wider
     column and is what made this look like a dashboard rather than what is standing ready. */
  /* A clear break from the box above. At one section break the cards read as part of the
     composer's block rather than as the separate standing work they are. */
  margin: var(--s-hero) auto 0;
  max-width: var(--pill);
  width: 100%;
}

.home-extras[hidden] { display: none; }

/* Recedes with the pane while a question is being written. `app.css` does this for `.pane`
   and knew nothing about a reports section, so the cards stayed at full strength on a screen
   that had otherwise cleared itself for the box — the loudest thing left on it.
   Same values, so the two fade as one thing rather than two. */
.app.composing .home-extras {
  opacity: 0.07;
  filter: blur(3px);
  transform: scale(0.99);
  pointer-events: none;
}

/* No rule of its own: the heading wears `.label`, the same rubric "Recent questions" wears.
   Only the gap under it belongs here. */
.home-extras .label { margin-bottom: var(--s-tight); }

.prepared-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(8.25rem, 1fr);
  gap: var(--s-tight);
}

/* The row height reaches the *card*, not just the list item holding it.
 *
 * `grid-auto-rows` sizes the `<li>`, and a button is not stretched by anything on its own —
 * so each card stood at the height of its own text and four boxes came out four different
 * sizes, which is precisely the defect `1fr` rows exist to prevent. Making the item a grid
 * container of one gives the button the row's full height with no `height: 100%` to keep in
 * step with it.
 *
 * The item, deliberately, and never `.report` itself: children of a grid container have their
 * `display` blockified, so `-webkit-box` on the title would silently become `flow-root` and
 * both line clamps below would stop clamping. The card stays a block container. */
.prepared-grid > li {
  display: grid;
  min-height: 0;
}

/* A standing finding.
 *
 * Block layout, not grid, and that is load-bearing rather than a simplification: a grid item
 * has its `display` blockified, so `-webkit-box` on a direct child silently becomes
 * `flow-root` and the line clamp below does nothing. */
.report {
  display: block;
  text-align: left;
  width: 100%;
  padding: 14px;
  min-height: 0;
  overflow: hidden;
  /* Four cards of one size. They used to take their height from their own text, so a
     two-line title made one card taller than the one beside it and the grid read as four
     unrelated boxes rather than as one set to choose from. */
  border: var(--rule);
  border-radius: 16px;
  background: var(--raised);
  cursor: pointer;
  transition: border-color 120ms var(--ease);
}

.report:hover:not(:disabled) { border-color: var(--ink-3); }
.report:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.report:disabled { cursor: default; }

/* 16px: a step under the composer's 18 and over the detail line's 14. At 18 these four cards
   matched the question box on weight and won a screen whose subject is the box above them. */
.report-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Two lines are *reserved*, not merely permitted.
   *
   * The clamp caps a long title at two lines; it does nothing for a short one, which took a
   * single line and let everything under it ride up. Read across four cards, the descriptions
   * then started at two different heights and the row looked misaligned rather than varied.
   * Reserving the space costs a short title one empty line and buys every card the same
   * internal rhythm. */
  min-height: calc(1.35em * 2);
  margin-bottom: 6px;
}

.report-detail {
  font-family: var(--sans);
  font-size: 14px;
  /* Stated rather than inherited, because the reserved height below is computed from it and a
     line-height that drifts would silently stop matching the space kept for it. */
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Same reservation, one level down: it keeps the timestamp on one baseline across the row
     rather than floating up under whichever description happened to be short. */
  min-height: calc(1.45em * 2);
  margin-bottom: 6px;
}

/* Mono, because it is a timestamp and the eye should read it as machine output rather than
   as another sentence. */
.report-updated {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .prepared-grid { grid-template-columns: 1fr; }
}

/* A split-out branch. Windows Active Apps carries five submetrics that count *apps*, and
   inside the DAD table they sat under a count of *devices* sharing one column of numbers —
   five rows whose unit had nothing to do with the rows above them. Its own table, its own
   subject, its own heading. */
.dossier-section {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: var(--s-section) 0 var(--s-tight);
}

/* --------------------------------------------------------------------------- sections
 *
 * Every block on the page says what it is. There is no table/chart toggle here: the answer
 * screen's toggle swaps two views of one dataset, and a report's table and its trend are two
 * datasets — where each metric stands now, and where it has been going. Both are shown.
 */

.dossier-section {
  margin: var(--s-section) 0 var(--s-tight);
  max-width: var(--measure);
}

.dossier-section-title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* What the block below actually shows, in a sentence. The indexing note in particular has to
   be here rather than in a tooltip: a reader who does not know the lines are indexed will read
   a 3% rise on a ratio as a 3-point rise, and those are different claims. */
.dossier-section-note {
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0.35rem 0 0;
}

/* The trend block. Shown, not toggled to — a report's chart is part of the report. */
.dossier-trend { margin-top: var(--s-tight); }

.dossier-panel[hidden] { display: none; }

/* Which metrics are charted, when the tree holds more than one scale. Named options rather
   than the answer screen's two glyphs, because these are not two views of one thing — they
   are different metrics, and only their names say which. */
.dossier-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: var(--s-tight);
}

.dossier-switch-option {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-3);
  background: none;
  border: var(--rule);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.dossier-switch-option:hover { color: var(--slate); border-color: var(--slate); }
.dossier-switch-option:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

/* The same signal the answer screen's toggle uses for its pressed state, so "this is the one
   you are looking at" reads the same way in both places. */
.dossier-switch-option[aria-pressed="true"] {
  background: var(--pane-ground);
  color: var(--ink);
  border-color: var(--ink-3);
}

/* The legend. Colour is the only thing tying a line to a name, so the swatch has to carry
   the same hue the path does — both come from `series-N`, which sets `color` alone. */
.dossier-key {
  list-style: none;
  margin: var(--s-tight) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-tight);
}

.dossier-key-item {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dossier-key-item::before {
  content: "";
  width: 14px;
  height: 2px;
  background: currentColor;
  flex: none;
}

/* The legend swatches live outside the `<svg>`, so `.chart .series-N` does not reach them.
   Same six hues, same order, so a swatch and its line are the same colour by construction
   rather than by two lists that have to be kept in step. */
.dossier-key-item.series-0 { color: var(--slate); }
.dossier-key-item.series-1 { color: #a8562f; }
.dossier-key-item.series-2 { color: #3f7d5c; }
.dossier-key-item.series-3 { color: #7a5aa6; }
.dossier-key-item.series-4 { color: #96702a; }
.dossier-key-item.series-5 { color: #4a6d84; }

/* The figure and the day it belongs to, stacked in one cell.
 *
 * Cadence is a property of the metric: Windows DAD reports daily and reaches 24 Aug while
 * Windows Active Apps reports weekly and stops at 19 Aug. A single date in the header cannot
 * be true of both, and a reader comparing two rows has to know they are not the same day. */
.dossier-figure { display: block; }

.dossier-on {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 0.15rem;
}