/* Forecast history: creating and reviewing a portable archive.
   Shared cards, controls, status surfaces and buttons stay component-owned;
   this file holds only the layout unique to the archive journey. */

/* Sits above the form as context for the decision, not as an alert: it is
   ordinary supporting text, which is the point — an archive being overdue is
   not an error state. */
.archive-marker {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.archive-form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(12rem, 18rem) minmax(12rem, 22rem);
}

.archive-form[hidden] {
  display: none;
}

.archive-form .control-group {
  margin: 0;
  min-width: 0;
}

/* The note is optional context, so it spans the row beneath the two fields
   that identify what is being archived. */
.archive-note-group {
  grid-column: 1 / -1;
}

.archive-note-group textarea {
  resize: vertical;
}

.archive-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.archive-review {
  margin-top: var(--space-4);
}

.archive-evidence,
.archive-note {
  margin: 0 0 var(--space-3);
}

.archive-note {
  border-left: 2px solid var(--color-line);
  color: var(--color-text-muted);
  padding-left: var(--space-3);
}

/* Facts read as pairs rather than a table: there are few of them and they are
   scanned, not compared. One definition serves the review, the archive cards
   and the inspection surface — they are the same role in three places, and
   letting them drift is how two of them end up spaced differently. */
.archive-facts,
.archive-card-facts {
  display: grid;
  gap: var(--space-3) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0 0 var(--space-4);
}

.archive-facts div,
.archive-card-facts div,
.archive-case {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.archive-facts dt,
.archive-facts dd,
.archive-card-facts dt,
.archive-card-facts dd {
  margin: 0;
}

.archive-facts dt,
.archive-card-facts dt {
  color: var(--color-text-muted);
}

/* The plaintext warning is the one thing on this surface that must not be
   skimmed past, so it is separated rather than folded in with the facts. The
   surface itself is `status-surface status-surface-compact is-warn`: this is
   the app's warning meaning, and rebuilding it here would let the two drift.
   Only placement belongs to the page. */
.archive-warning {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
}



/* Open archives. The second of the panel's progressive sections: create above,
   what you have opened below, comparison to come in Slice 4. */
.archive-library {
  margin-top: var(--space-5);
}

/* The heading and the one action that fills this section share a row, the same
   arrangement the tab bar uses above. */
.archive-library-heading {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.archive-library-heading h3 {
  margin: 0;
}

.archive-library-hint {
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-4);
}

.archive-load-errors {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.archive-load-error-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

.archive-cards {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive-card-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.archive-card-heading h4 {
  margin: 0;
}

/* The filename is provenance, not identity: the label names the forecast. */
.archive-card-file {
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

/* Card facts differ from review facts only in where they sit. */
.archive-card-facts {
  margin: var(--space-4) 0 0;
}

/* Inspecting one archive. Read-only by nature, so it carries no controls
   beyond Close — every figure here is a record, not an input. */
.archive-inspection {
  margin-top: var(--space-5);
}

.archive-inspection-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.archive-inspection-heading h3 {
  margin: var(--space-1) 0 0;
}

.archive-inspection-outlook {
  margin: 0 0 var(--space-4);
}

.archive-inspection-subheading {
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
}

/* The archive's charts compose the shared card and viewport; only their
   spacing inside this read-only surface belongs to the page. */
.archive-chart {
  margin-bottom: var(--space-4);
}

.archive-chart h5 {
  margin: 0 0 var(--space-2);
}

/* The data behind each chart, disclosed. Long by nature, so it scrolls within
   its card rather than stretching the page. */
.archive-series {
  margin-top: var(--space-3);
}

.archive-series summary {
  color: var(--color-text-muted);
  cursor: pointer;
}

/* The table itself is the shared component: width, collapse, cell padding,
   borders, header hierarchy and `.num` alignment all belong to
   `components/tables.css` and must not be restated. What is specific here is
   that forty rows are bounded rather than stretching the card, which means the
   header has to stay put while they scroll. */
.archive-series-scroll {
  margin-top: var(--space-2);
  max-height: 18rem;
  overflow: auto;
}

.archive-series-scroll thead th {
  position: sticky;
  top: 0;
}

.archive-series-scroll tbody th span {
  display: block;
  min-width: 12rem;
  text-align: left;
}

.archive-series-scroll tbody th .type-caption {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  white-space: normal;
}

.archive-inspection-footnote {
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
}

@media (max-width: 767px) {
  .archive-form {
    grid-template-columns: 1fr;
  }

  /* The heading's action drops below it and spans the width, as the tab bar's
     action does at this size. */
  .archive-library-heading {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .archive-card-heading,
  .archive-inspection-heading {
    flex-direction: column;
  }

  .archive-inspection-heading .btn {
    width: 100%;
  }

  .archive-card-actions {
    width: 100%;
  }

  .archive-card-actions .btn {
    min-height: 44px;
    width: 100%;
  }

  .archive-review .btn {
    width: 100%;
  }
}