/* =============================================================================
   WorkFabric layout.

   Plain CSS, no build step. Colours always come from the --aegis-* variables in
   theme.css, never from fixed values, so both themes keep working.
   Every class here starts with "wf-" to stay clear of the library's "aegis-" classes.

   Contents
     1. The shell        top bar, main navigation, page area
     2. The workspace    the two-pane layout used inside an initiative
     3. A page           titles, toolbars, facts, tabs
     4. Lists            the card-style rows used for initiatives and work items
     4b. The overview    headline tiles, progress meters, the two panels
     5. Small pieces     status pills, dots, links, buttons, forms
     6. Small screens
     7. Blazor's hooks
   ============================================================================= */

/* ---- 1. The shell ------------------------------------------------------------ */

.wf-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);   /* one column that may shrink below its content */
  min-height: 100vh;
}

.wf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
}

.wf-brand {
  display: flex;
  align-items: center;       /* centred, so the logo and the name sit on one line */
  gap: 0.75rem;
  font-size: 1.05rem;
  text-decoration: none;
}
.wf-brand-name { font-weight: 700; color: var(--aegis-primary); }

/* The logo comes in two versions. Dark is the default theme, so the light-coloured mark shows
   unless the page says data-theme="light". This follows the theme at once, with no code. */
/* A little larger than the text, because the artwork has empty space around it inside its frame. */
.wf-logo { flex: none; width: 2.25rem; height: 2.25rem; margin: -0.3rem -0.3rem -0.3rem 0; }
.wf-logo-on-light { display: none; }
[data-theme="light"] .wf-logo-on-light { display: block; }
[data-theme="light"] .wf-logo-on-dark { display: none; }

/* margin-left keeps this half on the right when the brand is left out, as it is inside Teams. */
.wf-header-right { display: flex; align-items: center; gap: 0.75rem; min-width: 0; margin-left: auto; }

.wf-breadcrumb {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  color: var(--aegis-muted-foreground);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-breadcrumb a { color: inherit; text-decoration: none; }
.wf-breadcrumb a:hover { color: var(--aegis-foreground); }

/* The current user's initials. */
.wf-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--aegis-accent);
  color: var(--aegis-accent-foreground);
  font-size: 0.8rem;
  font-weight: 600;
}

.wf-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
}

.wf-main {
  min-width: 0;               /* lets wide content scroll instead of stretching the page */
  padding: 2.25rem 2.5rem;
}

/* The main navigation: roomier items than the library's default. */
/* The top bar, the navigation and the page share ONE background, with no lines between them.
   The page reads as a single calm surface; only the cards stand out from it. */
.wf-sidebar.aegis-sidebar { width: 13rem; border-right: 0; background: var(--aegis-background); }
.wf-sidebar .aegis-sidebar-group { padding: 1rem 0.75rem; }
.wf-sidebar .aegis-sidebar-menu-button { height: 2.6rem; padding: 0 0.9rem; }
/* The version at the foot of the navigation. The sidebar is a column, so this sinks to the bottom. */
.wf-version { margin-top: auto; padding: 1rem 1.65rem; font-size: 0.75rem; color: var(--aegis-muted-foreground); }

/* ---- 2. The workspace: a list on the left, the chosen record on the right ----- */

.wf-workspace {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  min-height: 0;
}

.wf-workspace-list {
  padding: 1.5rem 1rem;
  background: var(--aegis-background);   /* same surface as the page, see the note on the navigation */
  overflow-y: auto;
}

.wf-workspace-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0.75rem 1rem;
}
.wf-workspace-list-title { font-size: 1.1rem; font-weight: 600; color: inherit; text-decoration: none; }
.wf-workspace-list-title:hover { color: var(--aegis-primary); }

.wf-side-item {
  display: block;
  padding: 0.8rem 0.75rem;
  border-radius: var(--aegis-radius);
  color: var(--aegis-sidebar-foreground);
  text-decoration: none;
}
.wf-side-item:hover,
.wf-side-item-active { background: var(--aegis-sidebar-accent); color: var(--aegis-sidebar-accent-foreground); }

.wf-side-item-title { display: block; font-weight: 600; }
.wf-side-item-sub {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  color: var(--aegis-muted-foreground);
  font-size: 0.875rem;
}

/* ---- 3. A page --------------------------------------------------------------- */

.wf-page-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
.wf-page-subtitle { margin-top: 0.35rem; color: var(--aegis-muted-foreground); }

.wf-page-content { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
.wf-page-content-tight { margin-top: 0; }

/* Let a card be narrower than its content. Without this, a wide table pushes its card past
   the edge of a small screen; with it, the table scrolls sideways inside the card. */
.wf-page-content > * { min-width: 0; }

/* The top of a page: the title on the left, the main buttons on the right. */
.wf-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* A few "label over value" facts side by side, wrapping on small screens. */
.wf-facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
.wf-facts-ruled {
  margin-top: 1.75rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--aegis-border);
  border-bottom: 1px solid var(--aegis-border);
}
.wf-fact-label { color: var(--aegis-muted-foreground); font-size: 0.85rem; }
.wf-fact-value { margin-top: 0.45rem; font-weight: 600; }
.wf-progress { margin-top: 0.5rem; min-width: 10rem; }
/* The count beside a percentage: "41% complete  15 of 37". */
.wf-fact-note { margin-left: 0.5rem; font-weight: 400; font-size: 0.85rem; }

/* Tabs: plain buttons with a line under the chosen one. */
.wf-tabs {
  display: flex;
  gap: 1.5rem;
  margin: 1.75rem 0;
  border-bottom: 1px solid var(--aegis-border);
}
.wf-tab {
  padding: 0.6rem 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--aegis-muted-foreground);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.wf-tab:hover { color: var(--aegis-foreground); }
.wf-tab-active { color: var(--aegis-foreground); border-bottom-color: var(--aegis-primary); }

.wf-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wf-section-title { font-size: 1.15rem; font-weight: 600; }

.wf-reasons { margin: 0.25rem 0 0; padding-left: 1.1rem; list-style: disc; }


/* ---- 4. Lists: one card, one row per record ---------------------------------- */

.wf-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* A group of rows under a heading, such as one business area on the Initiatives page. */
.wf-group + .wf-group { margin-top: 0.5rem; }
.wf-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  padding: 0 0.25rem;
}
.wf-group-title { font-size: 1rem; font-weight: 600; }

.wf-list {
  border: 1px solid var(--aegis-border);
  border-radius: calc(var(--aegis-radius) + 4px);
  background: var(--aegis-card);
  overflow: hidden;
}

/* A row: the name takes the room that is left; the pill, the date and the actions keep theirs. */
.wf-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 5.5rem auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem;
}
.wf-list-row + .wf-list-row { border-top: 1px solid var(--aegis-border); }

.wf-list-main { min-width: 0; color: inherit; text-decoration: none; }
a.wf-list-main:hover .wf-list-title { color: var(--aegis-primary); }

.wf-list-title { display: block; font-weight: 600; }
.wf-list-sub { display: block; margin-top: 0.3rem; color: var(--aegis-muted-foreground); font-size: 0.875rem; }

.wf-list-date { color: var(--aegis-muted-foreground); font-size: 0.875rem; text-align: right; white-space: nowrap; }
.wf-overdue { color: var(--aegis-destructive); font-weight: 600; }

/* A fixed width, so the columns line up even when a row has fewer actions than its neighbours. */
.wf-list-actions { display: flex; gap: 1rem; justify-content: flex-end; width: 10.5rem; }

/* ---- 4b. The executive overview ---------------------------------------------- */

/* The headline numbers: four tiles, then two, then one as the screen narrows. */
.wf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.wf-kpi {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--aegis-border);
  border-radius: calc(var(--aegis-radius) + 4px);
  background: var(--aegis-card);
}
.wf-kpi-label { color: var(--aegis-muted-foreground); font-size: 0.9rem; }
.wf-kpi-value { margin: 0.5rem 0 0.35rem; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.wf-kpi-note { color: var(--aegis-muted-foreground); font-size: 0.875rem; }

/* A number or word in a status colour. The colour is pulled towards the normal text colour so it
   stays readable in both themes. It never stands alone: a label beside it always says what it is. */
.wf-ink-success { color: color-mix(in oklch, var(--aegis-success) 72%, var(--aegis-foreground)); }
.wf-ink-warning { color: color-mix(in oklch, var(--aegis-warning) 72%, var(--aegis-foreground)); }
.wf-ink-danger  { color: color-mix(in oklch, var(--aegis-destructive) 72%, var(--aegis-foreground)); }
.wf-ink-info    { color: color-mix(in oklch, var(--aegis-info) 72%, var(--aegis-foreground)); }
.wf-ink-muted   { color: var(--aegis-muted-foreground); }

/* Two panels side by side: the initiatives (wide) and what needs attention (narrow). */
.wf-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }

.wf-panel {
  padding: 1.4rem 1.5rem 0.5rem;
  border: 1px solid var(--aegis-border);
  border-radius: calc(var(--aegis-radius) + 4px);
  background: var(--aegis-card);
}
.wf-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--aegis-border);
}

/* One initiative: name, health, progress meter, finish date. The whole row is a link. */
.wf-priority-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(8rem, 11rem) 8rem;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 0;
  color: inherit;
  text-decoration: none;
}
.wf-priority-row + .wf-priority-row,
.wf-attention-row + .wf-attention-row { border-top: 1px solid var(--aegis-border); }
.wf-priority-row:hover .wf-list-title,
.wf-attention-row:hover .wf-list-title { color: var(--aegis-primary); }

/* A progress meter. The fill is the status colour and the track is a pale step of the SAME
   colour, so the state reads across the whole bar. The colour comes from a wf-pill-... class. */
.wf-meter {
  --wf-pill-colour: var(--aegis-muted-foreground);
  height: 0.4rem;
  border-radius: 1rem;
  background: color-mix(in oklch, var(--wf-pill-colour) 22%, transparent);
  overflow: hidden;
}
.wf-meter-fill { height: 100%; border-radius: 1rem; background: var(--wf-pill-colour); }
.wf-meter-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  color: var(--aegis-muted-foreground);
  font-size: 0.8rem;
}

.wf-finish { text-align: right; white-space: nowrap; }
.wf-finish-date { display: block; font-weight: 600; font-size: 0.9rem; }
/* The small word in front of the date, so nobody has to guess which date is the forecast. */
.wf-finish-word { color: var(--aegis-muted-foreground); font-weight: 400; font-size: 0.875rem; }

.wf-attention-row { display: block; padding: 1.1rem 0; color: inherit; text-decoration: none; }
.wf-attention-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.wf-attention-label { flex: none; font-size: 0.8rem; font-weight: 600; }
.wf-attention-empty { padding: 1.1rem 0; }

/* The right-hand column of the overview holds two panels, one above the other. */
.wf-overview-side { display: grid; gap: 1rem; }

/* One business area: its name, a bar split by health, and the same split in words. */
.wf-area-row { padding: 1.1rem 0; }
.wf-area-row + .wf-area-row { border-top: 1px solid var(--aegis-border); }

/* The bar. Each part grows with the number of initiatives it stands for, and takes its colour
   from a wf-pill-... class, the same way a pill does. The gap keeps neighbours apart, and the
   words under the bar say the same thing, so nobody has to rely on colour alone. */
.wf-split { display: flex; gap: 2px; height: 0.4rem; margin: 0.6rem 0 0.4rem; }
.wf-split-part {
  --wf-pill-colour: var(--aegis-muted-foreground);
  flex-basis: 0;
  border-radius: 1rem;
  background: var(--wf-pill-colour);
}

/* ---- 4c. Comments ------------------------------------------------------------ */

/* The thread on the comments panel: one entry per comment, who and when above the words. */
.wf-comments { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.wf-comment { padding: 0.9rem 0; }
.wf-comment + .wf-comment { border-top: 1px solid var(--aegis-border); }
.wf-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.85rem; }
.wf-comment-who { font-weight: 600; }
.wf-comment-actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.wf-link-button-danger { color: var(--aegis-destructive); }

/* The words as they were typed: line breaks are kept, and a long word wraps. */
.wf-comment-text { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- 5. Small pieces --------------------------------------------------------- */

/* A soft, tinted status label. The tint is the status colour mixed into the surface, and the
   text is the status colour pulled towards the normal text colour, so it reads in both themes. */
.wf-pill {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: calc(var(--aegis-radius) - 2px);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  --wf-pill-colour: var(--aegis-muted-foreground);
  background: color-mix(in oklch, var(--wf-pill-colour) 16%, transparent);
  color: color-mix(in oklch, var(--wf-pill-colour) 72%, var(--aegis-foreground));
}
/* The row of status pills at the top of a list: each shows a status and how many records
   have it, and can be clicked to show only those. They use the same colours as .wf-pill.
   This block must stay ABOVE the wf-pill-success ... wf-pill-muted rules, which set the colour. */
.wf-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid transparent;
  border-radius: calc(var(--aegis-radius) - 2px);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  --wf-pill-colour: var(--aegis-muted-foreground);
  background: color-mix(in oklch, var(--wf-pill-colour) 16%, transparent);
  color: color-mix(in oklch, var(--wf-pill-colour) 72%, var(--aegis-foreground));
}
.wf-chip:hover { background: color-mix(in oklch, var(--wf-pill-colour) 26%, transparent); }
.wf-chip:focus-visible { outline: 2px solid var(--aegis-ring); outline-offset: 2px; }
.wf-chip-chosen { border-color: var(--wf-pill-colour); }
.wf-chip-count { font-size: 1.05rem; font-weight: 700; }

/* A smaller row of chips, for the tags above the work items. It sits just above the list. */
.wf-chips-small { gap: 0.4rem; margin-bottom: 0.75rem; }

/* The filter bar above the work items: the Status pills and the Tag dropdown, side by side,
   lined up at the bottom. On a narrow screen the dropdown drops underneath. */
.wf-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 2rem; margin-bottom: 1rem; }
/* An Aegis field is as wide as its parent, which would put each filter on its own line. */
.wf-filters .aegis-field { width: auto; }
.wf-chips-inline { margin-bottom: 0; min-height: 2.25rem; align-items: center; }
.wf-filter-tag { width: 16rem; max-width: 100%; }
.wf-filter-sort { width: 13rem; max-width: 100%; }
.wf-chips-small .wf-chip { padding: 0.25rem 0.7rem; gap: 0.5rem; font-size: 0.8rem; }
.wf-chips-small .wf-chip-count { font-size: 0.85rem; }

/* The number in front of a work item's title, such as WI-1042. Quieter than the title, and
   never struck through, so it can still be read on work that is done. */
.wf-number { display: inline-block; margin-right: 0.4rem; font-weight: 500; color: var(--aegis-muted-foreground); text-decoration: none; }

/* Tags: small labels that people make up, such as "sprint1". They are always grey. Green,
   amber and red mean health and status in this application, so a tag never uses them. */
.wf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.wf-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border: 0;
  border-radius: 1rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  background: color-mix(in oklch, var(--aegis-muted-foreground) 16%, transparent);
  color: color-mix(in oklch, var(--aegis-muted-foreground) 72%, var(--aegis-foreground));
}

/* In the work item form: the x on a tag, the box for a new tag, and the tags on offer. */
.wf-tag-remove { border: 0; padding: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.wf-tag-remove:hover { color: var(--aegis-destructive); }
.wf-tag-add { display: flex; gap: 0.5rem; }
.wf-tag-add .aegis-input { flex: 1; min-width: 0; }
.wf-tag-hint { font-size: 0.75rem; }
.wf-tag-suggestion { cursor: pointer; background: none; border: 1px dashed var(--aegis-border); }
.wf-tag-suggestion:hover { border-style: solid; color: var(--aegis-foreground); }
.wf-tag-remove:focus-visible, .wf-tag-suggestion:focus-visible { outline: 2px solid var(--aegis-ring); outline-offset: 2px; }
.wf-tag-error { font-size: 0.8rem; color: var(--aegis-destructive); }

/* Wide enough for the longest label, "Not planned yet", so every pill in a column lines up. */
.wf-pill-wide { min-width: 8.5rem; }
.wf-pill-success { --wf-pill-colour: var(--aegis-success); }
.wf-pill-warning { --wf-pill-colour: var(--aegis-warning); }
.wf-pill-danger  { --wf-pill-colour: var(--aegis-destructive); }
.wf-pill-info    { --wf-pill-colour: var(--aegis-info); }
.wf-pill-muted   { --wf-pill-colour: var(--aegis-muted-foreground); }

/* A small coloured dot in front of a status word. */
.wf-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--aegis-muted-foreground);
}
.wf-dot-success { background: var(--aegis-success); }
.wf-dot-warning { background: var(--aegis-warning); }
.wf-dot-danger  { background: var(--aegis-destructive); }
.wf-dot-info    { background: var(--aegis-info); }

.wf-link { color: var(--aegis-primary); font-weight: 500; text-decoration: none; }
.wf-link:hover { text-decoration: underline; }

/* A button that looks like a link, for quiet actions in a row such as "Edit". */
.wf-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aegis-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.wf-link-button:hover { text-decoration: underline; }
/* A secondary action, such as Edit: present, but not competing with the names in the list. */
.wf-link-button-quiet { color: var(--aegis-muted-foreground); font-weight: 500; }
.wf-link-button-quiet:hover { color: var(--aegis-foreground); }

.wf-muted { color: var(--aegis-muted-foreground); font-size: 0.9em; }
/* A completed work item is dimmed, not struck through, so it stays readable. The pill says it is complete. */
.wf-done { color: var(--aegis-muted-foreground); font-weight: 500; }

/* A badge that follows some text needs a little room. */
.wf-badge-gap { margin-left: 0.5rem; vertical-align: middle; }

/* A row of buttons. */
.wf-buttons { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* The fields of a form, stacked. */
.wf-form { display: grid; gap: 1.1rem; }

/* ---- 6. Small screens and narrow Microsoft Teams tabs ------------------------- */

@media (max-width: 900px) {
  /* Inside an initiative, the list of initiatives gives way to the initiative itself.
     The breadcrumb in the top bar leads back to the list. */
  .wf-workspace { grid-template-columns: minmax(0, 1fr); }
  .wf-workspace-list { display: none; }

  /* The overview: the two panels stack. */
  .wf-overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* One column: the navigation takes only the height it needs, the page takes the rest. */
  .wf-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .wf-sidebar.aegis-sidebar {
    width: 100%;
    height: auto;
  }
  .wf-main { padding: 1.5rem 1.25rem; }

  /* A list row stacks: the name on top, then the pill, the date and the actions in one line. */
  .wf-list-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem 1rem; }
  .wf-list-main { grid-column: 1 / -1; }
  .wf-list-date { text-align: left; }
  .wf-list-actions { width: auto; }
  .wf-pill-wide { min-width: 0; }

  .wf-priority-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem 1rem; }
  .wf-priority-row .wf-list-main { grid-column: 1 / -1; }
}

/* ---- 7. Blazor's own hooks ---------------------------------------------------- */

.wf-loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--aegis-muted-foreground);
}

h1:focus { outline: none; }

#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 0.6rem 1.25rem;
  background: var(--aegis-destructive);
  color: var(--aegis-destructive-foreground);
}
#blazor-error-ui .reload { margin-left: 0.5rem; color: inherit; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer; }

/* ---- Timeline page -------------------------------------------------------- */

/* The panel is the Aegis timeline with the quarter labels at its foot, so it needs the
   bottom padding the other panels leave to their last row. */
.wf-timeline-panel { padding-bottom: 1.4rem; }
.wf-timeline-panel .wf-panel-header { margin-bottom: 1.5rem; flex-wrap: wrap; }

/* The legend's dots match the timeline's dots in size, so the same colour reads the same.
   A smaller dot blends more of its edge into the background and looks darker. */
.wf-timeline-panel .aegis-legend .aegis-dot { width: 1rem; height: 1rem; }