/* Ledger 2 form sheet (decision 303; preview §4; reference §4). One --surface
   sheet per form, sections split by 1px dividers; from a 40rem sheet the
   heading + help sit left of the fields, which lie on a 6-column grid. A side
   column from 64rem for short forms. The sticky action bar is the sheet's last
   child: unsaved-state text left, Cancel + primary right.
   Macros: core/components/_lg_form.html; behaviour js/v3/dirty.js. */

.lg-formwrap { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64em) {
  .lg-formwrap--aside { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.lg-fsheet {
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.lg-fsec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-block-start: 1px solid var(--border);
}
.lg-fsec:first-child { border-block-start: 0; }
/* A small form wrapping one section inside a view sheet (Inquiry reply): keep its divider. */
.lg-fsheet > form:not(:first-child) > .lg-fsec:first-child { border-block-start: 1px solid var(--border); }
.lg-fsec__title {
  margin: 0;
  font-size: var(--size-section);
  line-height: var(--leading-section);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lg-fsec__help { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--size-label); line-height: var(--leading-label); }
@container (min-width: 40rem) {
  .lg-fsec { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-8); padding: var(--space-6); }
  /* An editor that needs the whole width (event page ticket types, promo
     codes, form builder): heading + help above it at every size. */
  .lg-fsec--wide { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
.lg-fsec__body { min-width: 0; }

/* Fields on a 6-column grid: full / half / third only. Existing field widths
   map onto it (xs, sm = a third; md = a half; the rest full), and inside the
   grid the column, not a max-width, sets the size. */
.lg-fgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-content: start; }
.lg-fgrid > * { grid-column: 1 / -1; min-width: 0; }
/* Fields keep a reading measure on wide screens (decisions 304, 333); wide
   editor sections (.lg-fsec__body) use the whole sheet. */
.lg-fgrid { max-inline-size: 48rem; }
.lg-fgrid > .lg-form__row { display: contents; }
.lg-fgrid .lg-field__control { max-width: none; }
@container (min-width: 40rem) {
  .lg-fgrid > :is(.lg-field--w-xs, .lg-field--w-sm),
  .lg-fgrid > .lg-form__row > :is(.lg-field--w-xs, .lg-field--w-sm) { grid-column: span 2; }
  .lg-fgrid > .lg-field--w-md,
  .lg-fgrid > .lg-form__row > * { grid-column: span 3; }
}

/* Side column: what happens next, or a summary. */
.lg-fside {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.lg-fside__title { margin: 0 0 var(--space-2); font-size: var(--size-card-title); line-height: var(--leading-card-title); font-weight: 600; }
.lg-fside__text { margin: 0; color: var(--text-muted); font-size: var(--size-label); line-height: var(--leading-label); }
.lg-fside__steps { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); color: var(--text-muted); font-size: var(--size-label); line-height: var(--leading-label); }
.lg-fside__steps li + li { margin-block-start: var(--space-2); }
.lg-fside__act { margin-block-start: var(--space-3); }
@media (min-width: 64em) { .lg-fside { position: sticky; top: calc(var(--bar-height) + var(--space-4)); } }

/* The action bar: sticky at the bottom of the sheet (the sheet is its parent,
   so it stays inside the white surface), always shown. */
.lg-actionbar {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-bar);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
}
@container (min-width: 40rem) { .lg-actionbar { padding: var(--space-3) var(--space-6); } }
.lg-actionbar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--warning);
  font-size: var(--size-label);
  font-weight: 500;
}
.lg-actionbar__status:not(:has([data-lg-actionbar-text]:not(:empty))) { visibility: hidden; }
.lg-actionbar__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; }
.lg-actionbar__actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }
/* Focus is never hidden under the bar (WCAG 2.4.11). */
html:has(.lg-actionbar) { scroll-padding-bottom: calc(var(--control-height) + var(--space-6) + var(--space-2)); }
@media (prefers-reduced-transparency: reduce) { .lg-actionbar { background: var(--surface); backdrop-filter: none; } }

@media (max-width: 39.99em) {
  .lg-actionbar { bottom: calc(var(--bar-height) + 1px + env(safe-area-inset-bottom)); }   /* above the tab bar */
  .lg-actionbar__actions { flex: 1 0 100%; }
  .lg-actionbar__actions > .lg-btn { flex: 1; }
  .lg-actionbar__status:not(:has([data-lg-actionbar-text]:not(:empty))) { display: none; }
  html:has(.lg-actionbar) {
    scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--touch-target) * 2 + var(--space-6));
  }
}

/* ================= View pages (decisions 325-327; core/components/_lg_view.html) =================
   The same sheet: sections with heading + help left (from 40rem), facts on the
   6-column grid, activity, a side column from 64rem, the decide bar last. */
.lg-viewwrap > .lg-fsheet, .lg-viewwrap > .lg-vside { min-width: 0; }
.lg-vside { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 64em) { .lg-vside { position: sticky; top: calc(var(--bar-height) + var(--space-4)); } }
.lg-vside > .lg-fside { position: static; }
.lg-vsec__body { min-width: 0; }

/* Facts: label above value on the form's 6-column grid; long values wrap. */
.lg-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.lg-fact { grid-column: 1 / -1; min-width: 0; margin: 0; }
@container (min-width: 40rem) {
  .lg-fact--half, .lg-fact--long { grid-column: span 3; }
  .lg-fact--third { grid-column: span 2; }
}
/* Phones (2026-10-09, owner: view pages too bulky): short facts two per row, a
   long one (email, date, name over 18 characters; _lg_view.html) full width;
   tighter gaps and section padding. Wide sheets stay as they are. */
@container (max-width: 39.99rem) {
  .lg-fact--half, .lg-fact--third { grid-column: span 3; }
  .lg-facts { row-gap: var(--space-3); column-gap: var(--space-4); }
  .lg-fact dd { margin-block-start: calc(var(--space-1) / 2); }
}
@media (max-width: 39.99em) {
  .lg-viewwrap .lg-fsec { gap: var(--space-3); padding-block: var(--space-4); }
}
/* Label quiet, value strong (decision 364, owner: "label and value look the same"):
   the label is smaller, grey and regular; the value darker and medium. Contrast
   comes from weight, never a paler grey (--text-muted is the lightest text that
   passes WCAG AA). "Not set" stays regular grey (no .lg-fact__v). */
.lg-fact dt { color: var(--text-muted); font-size: var(--size-label); line-height: var(--leading-label); font-weight: 400; }
.lg-fact dd { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-1) 0 0; min-width: 0; overflow-wrap: anywhere; }
.lg-fact__v { min-width: 0; font-weight: 500; }
.lg-fact--none dd { color: var(--text-muted); }

/* Copy: a quiet icon button with a 44px tap area; the result shows beside it. */
.lg-copy {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-block: -0.375rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lg-copy::before { content: ""; position: absolute; inset: -0.375rem; }
@media (hover: hover) and (pointer: fine) { .lg-copy:hover { background: var(--neutral-tint); color: var(--text); } }
.lg-copy:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.lg-copy.is-done { color: var(--success); }
.lg-copy__said {
  position: absolute;
  inset-inline-start: calc(100% + var(--space-1));
  top: 50%;
  transform: translateY(-50%);
  color: var(--success);
  font-size: var(--size-caption);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease);
}
.lg-copy.is-done .lg-copy__said { opacity: 1; transition-duration: var(--dur-fast); }

/* Activity: newest first, one rail; only a payment gets a colour (with words). */
.lg-act { margin: 0; padding: 0; list-style: none; }
.lg-act__row {
  position: relative;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0 0 var(--space-4) var(--space-5);
}
.lg-act__row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1875rem;
  top: 0.4375rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--border-control);
}
.lg-act__row::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.4375rem;
  top: 1.125rem;
  bottom: 0.125rem;
  inline-size: 1px;
  background: var(--border);
}
.lg-act > .lg-act__row:last-child { padding-block-end: 0; }
.lg-act > .lg-act__row:last-child::after { display: none; }
.lg-act__row--money::before { background: var(--success); box-shadow: 0 0 0 1.5px var(--success); }
.lg-act__when { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--size-mono); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
.lg-act__what { margin: 0; }
.lg-act__by { display: block; color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }
.lg-act__text {
  display: block;
  margin-block-start: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--neutral-tint);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lg-act__more { margin-block-start: var(--space-3); }
.lg-act__more > summary { list-style: none; inline-size: fit-content; }
.lg-act__more > summary::-webkit-details-marker { display: none; }
.lg-act__more[open] > summary { display: none; }
.lg-act__more > .lg-act { margin-block-start: var(--space-4); }
@container (max-width: 39.99rem) {
  .lg-act__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-act__when { order: 2; }
}

/* Related items in the side column: whole rows are links, 44px tall. */
.lg-vrel { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.lg-vrel li + li { border-block-start: 1px solid var(--border); }
.lg-vrel a, .lg-vrel li > span { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--touch-target); padding-block: var(--space-2); color: var(--text); text-decoration: none; }
.lg-vrel a > svg { flex: none; color: var(--text-muted); }
.lg-vrel__t { flex: 1; min-width: 0; }
.lg-vrel__t small { display: block; color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }
@media (hover: hover) and (pointer: fine) { .lg-vrel a:hover .lg-vrel__t > span { text-decoration: underline; text-underline-offset: 0.15em; } }
.lg-vrel a:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-control); }

/* Decide bar (decision 327): same bar as forms, Approve / Reject. */
.lg-decidebar .lg-actionbar__actions { margin-inline-start: auto; }