/* Journals (§6.8) — list and editor. Grids from the reference. */

.jr__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.jr__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.jr__sub { font-size: 12.5px; color: var(--p-ink-2); margin: 3px 0 0; }
.jr__primary { margin-inline-start: auto; flex: none; }

.jr__table { min-width: 940px; }
.jr__thead, .jr__row {
  display: grid;
  grid-template-columns: 96px 92px 1fr 132px 116px 116px 128px 132px;
  align-items: center; width: 100%; text-align: start;
}
.jr__thead {
  padding: 10px 16px; background: var(--p-surface-2);
  border-bottom: 1px solid var(--p-line);
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--p-ink-3);
}
.jr__row {
  padding: 11px 16px; background: none; border: none;
  border-bottom: 1px solid var(--p-line);
  cursor: pointer; font-family: inherit; color: inherit;
}
.jr__row:hover { background: var(--p-surface-2); }
/* A neutral chip is `--p-ink-2` on `--p-surface-2` — matching the export's own
   `chip()` map exactly — and `--p-surface-2` is what the row turns on hover, so
   Type and Status DISSOLVED into the row under the cursor. Every type except
   'Audit proposal' is neutral, as are the Draft and Reversed statuses, so
   hovering erased the two columns a reviewer is reading.

   The export has no hover at all (its rows are inline-styled `transparent`), so
   the hover is ours and so is the bug. An inset ring, drawn ONLY on hover,
   keeps the chip at rest pixel-identical to the export while giving it an edge
   against the raised row. A background swap was tried first and rejected: in
   the light theme `--surface-card` and `--surface-raised` resolve to the same
   white, so it would have fixed nothing there. Scoped to this table —
   `.chip--neutral` is shared. */
.jr__row:hover .chip--neutral { box-shadow: inset 0 0 0 1px var(--p-line-2); }
.jr__row:last-child { border-bottom: none; }

.jr__no { font-size: 12px; font-weight: 600; }
.jr__date { font-size: 12px; color: var(--p-ink-2); }
.jr__desc { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-inline-end: 12px; }
/* Sizes verbatim from the export's inline styles on each cell. */
.jr__desc-main {
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jr__desc-sub {
  font-size: 10.5px; color: var(--p-ink-3); margin-block-start: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jr__amt { text-align: end; font-size: 12.5px; padding-inline-end: 10px; }
/* One slash-separated line — 'prepared / reviewed' — not two stacked names. */
.jr__people { font-size: 11px; color: var(--p-ink-2); }

/* ---- Editor drawer, 720px ---- */
.je__host { position: fixed; inset: 0; z-index: 85; }
.je__scrim {
  position: absolute; inset: 0; background: var(--p-scrim);
  border: none; padding: 0; cursor: pointer;
}
.je {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 720px; max-width: 100%;
  background: var(--p-surface); border-inline-start: 1px solid var(--p-line);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow-y: auto;
}
@media (max-width: 899px) { .je { width: 100%; } }

.je__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--p-line); }
.je__head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.je__no { font-size: 17px; font-weight: 600; margin: 0; }
.je__close {
  margin-inline-start: auto; background: none; border: none;
  color: var(--p-ink-2); cursor: pointer;
}
.je__fields { display: grid; grid-template-columns: 1fr 130px 130px; gap: 8px; }
.je__fields input {
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-md); padding: 9px 11px; font-size: 12.5px;
}
/* The three header fields share .je__fields input; these carry only what is
   particular to each — the date and period are figures, so they are set in the
   mono face and aligned with the amount columns below. */
.je__desc { font-family: inherit; }
.je__date { font-family: var(--font-mono); }
.je__period { color: var(--p-ink-3); cursor: not-allowed; }

.je__section { padding: 16px 20px; border-bottom: 1px solid var(--p-line); }

/* The line grid itself is declared with .je__lines-head below; this is the
   scroll region that holds it. */
.je__lines { display: block; }

.je__lines-head, .je__line, .je__totals {
  display: grid; grid-template-columns: 1fr 130px 118px 118px 34px;
  gap: 8px; align-items: center;
}
.je__lines-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--p-ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--p-line);
}
.je__line { padding: 6px 0; border-bottom: 1px solid var(--p-line); }
.je__line select, .je__line input {
  width: 100%; background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-sm); padding: 7px 9px; font-size: 12px;
}
.je__account { min-width: 0; }
.je__contact { min-width: 0; }
.je__amt { text-align: end; }
.je__remove {
  background: none; border: none; color: var(--p-ink-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.je__remove[aria-disabled='true'] { color: var(--p-line-2); cursor: not-allowed; }

.je__totals { padding: 10px 0; font-size: 12px; color: var(--p-ink-2); }
.je__total { font-family: var(--font-mono); font-weight: 700; color: var(--p-ink); }

.je__addline {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: none; border: 1px dashed var(--p-line-2);
  border-radius: var(--radius-pill); padding: 7px 13px;
  font-size: 12px; color: var(--p-ink-2); cursor: pointer;
}

.je__banner {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  border-radius: var(--radius-md); padding: 11px 13px;
  font-size: 12.5px; font-weight: 600;
}
.je__banner.is-ok { background: var(--p-ok-soft); color: var(--p-ok); }
.je__banner.is-risk { background: var(--p-risk-soft); color: var(--p-risk); }

/* The approval trail. The export's dot rail: a 7px dot per step, brand for a
   step that has happened and a line-2 grey for one still pending. Logical
   properties throughout so the rail sits on the right under RTL. */
.je__trail { list-style: none; margin: 0; padding: 0; }
.je__trail-step { display: flex; gap: 9px; padding: 6px 0; }
.je__trail-dot {
  width: 7px; height: 7px; flex: none; margin-top: 5px;
  border-radius: var(--radius-pill); background: var(--p-line-2);
}
.je__trail-step.is-done .je__trail-dot { background: var(--p-brand); }
.je__trail-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.je__trail-label { font-size: 11.5px; color: var(--p-ink); }
.je__trail-at { font-size: 10px; color: var(--p-ink-3); }

.je__note {
  width: 100%; background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-md); padding: 9px 11px; font-size: 12.5px;
  resize: vertical;
}
.je__note-warn {
  display: flex; align-items: center; gap: 5px; margin: 6px 0 0;
  font-size: 10.5px; color: var(--p-ink-3);
}

.je__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; margin-top: auto;
}
.je__foot-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.je__foot-btn {
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 9px 14px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.je__foot-btn.is-disabled, .btn-primary.is-disabled {
  background: var(--p-line-2); color: var(--p-ink-3); cursor: not-allowed;
  border-color: transparent;
}
.je__hint {
  margin: 0 0 0 auto; font-size: 11px; color: var(--p-ink-3); text-align: end;
}

/* ---- Proposals awaiting a decision (§6.8) ---- */
.prop__header { margin-bottom: 16px; }
.prop__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.prop__sub { font-size: 12.5px; color: var(--p-ink-2); margin: 4px 0 0; }
.prop__list { display: flex; flex-direction: column; gap: 10px; }
.prop__row {
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.prop__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prop__id { font-size: 13px; font-weight: 600; }
.prop__date { margin-inline-start: auto; font-size: 11.5px; color: var(--p-ink-3); }
.prop__memo { font-size: 13px; margin: 0 0 10px; }
.prop__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; }
.prop__facts dt { font-size: 11px; color: var(--p-ink-3); }
.prop__facts dd { margin: 0; font-size: 12.5px; }
.prop__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop__reject {
  background: transparent; border: 1px solid var(--p-line);
  border-radius: var(--radius-md); padding: 8px 14px;
  font-size: 12.5px; font-family: inherit; color: var(--p-ink); cursor: pointer;
}
.prop__decided { font-size: 12px; color: var(--p-ink-3); margin: 0; }
.prop__refusal {
  font-size: 11.5px; line-height: 1.55; color: var(--p-ink-2);
  border-inline-start: 2px solid var(--p-line-2); padding-inline-start: 10px;
  margin: 10px 0 0;
}