/* Concept 7: the Market Ledger. */

/* In ledger view the React sector tabs and card grid step aside (switch back with "Cards"). */
html.lg-page.lg-ledger main > div.container > div.mb-10,
html.lg-page.lg-ledger main > div.container > div.grid { display: none; }
html.lg-has-pick .bf-launcher { display: none; }

.lg { margin: 8px 0 72px; --lg-line: hsl(var(--border)); --lg-ink: hsl(var(--foreground)); --lg-mute: hsl(var(--muted-foreground)); }
.lg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--lg-ink); }
.lg-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mf-brass, #a88f5c);
}
.lg-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.lg-view { display: inline-flex; border: 1px solid var(--lg-line); }
.lg-view button {
  padding: 7px 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lg-mute);
  background: none; border: 0; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.lg-view button[aria-pressed="true"] { background: var(--lg-ink); color: hsl(var(--background)); }
html:not(.lg-ledger) .lg-body { display: none; }
html:not(.lg-ledger) .lg { margin-bottom: 28px; }

/* Toolbar */
.lg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; padding: 22px 0 18px; }
.lg-sectors { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.lg-sectors button {
  position: relative; padding: 6px 0; font-size: 14px; color: var(--lg-mute); background: none; border: 0; cursor: pointer;
  transition: color 0.2s;
}
.lg-sectors button span { font-size: 11px; margin-left: 2px; color: hsl(var(--muted-foreground) / 0.7); font-variant-numeric: tabular-nums; }
.lg-sectors button:hover, .lg-sectors button.is-on { color: var(--lg-ink); }
.lg-sectors button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lg-ink); }
.lg-tools { display: flex; gap: 20px; align-items: center; }
.lg-search input, .lg-select select {
  font: inherit; font-size: 13px; color: var(--lg-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--lg-line); border-radius: 0; padding: 7px 0; outline: none;
  transition: border-color 0.2s;
}
.lg-search input { width: 240px; }
.lg-search input::placeholder { color: hsl(var(--muted-foreground) / 0.75); }
.lg-select select { padding-right: 18px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 6px center / 5px 5px no-repeat,
              linear-gradient(-45deg, transparent 50%, currentColor 50%) right 1px center / 5px 5px no-repeat; }
.lg-search input:focus, .lg-select select:focus { border-bottom-color: var(--lg-ink); }

.lg-summary {
  display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 12px 0; border-top: 1px solid var(--lg-line);
  font-size: 12px; letter-spacing: 0.02em; color: var(--lg-mute);
}
.lg-summary b { font-weight: 500; color: var(--lg-ink); font-variant-numeric: tabular-nums; }
.lg-summary small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 4px; }

/* Table */
.lg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lg-table thead th {
  position: sticky; top: 84px; z-index: 2; background: hsl(var(--background));
  text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lg-mute);
  padding: 12px 12px; border-top: 1px solid var(--lg-line); border-bottom: 1px solid var(--lg-ink);
}
.lg-table thead th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.lg-table thead th button:hover, .lg-table thead th[aria-sort="ascending"] button, .lg-table thead th[aria-sort="descending"] button { color: var(--lg-ink); }
.lg-table thead th button:focus-visible { outline: 1px solid var(--lg-ink); outline-offset: 3px; }
.lg-table thead th i { font-style: normal; min-width: 8px; }
.lg-table td { padding: 15px 12px; border-bottom: 1px solid var(--lg-line); vertical-align: baseline; }
.lg-table .c-pick { width: 34px; padding-left: 4px; padding-right: 0; }
.lg-table .c-built { width: 86px; font-variant-numeric: tabular-nums; color: var(--lg-mute); }
.lg-table .c-loc { color: var(--lg-mute); }
.lg-table .c-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.lg-table thead .c-price button { flex-direction: row-reverse; }
.lg-table thead th.c-price { text-align: right; }
.lg-table .c-more { width: 28px; padding-left: 0; }

.lg-row { cursor: pointer; transition: background 0.15s; }
.lg-row:hover { background: hsl(var(--secondary)); }
.lg-item.is-picked .lg-row { background: hsl(var(--secondary)); }
.lg-name { all: unset; cursor: pointer; color: var(--lg-ink); }
.lg-name:focus-visible { outline: 1px solid var(--lg-ink); outline-offset: 3px; }
.lg-meta { display: none; }
.lg-sector { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.06em; color: hsl(var(--muted-foreground) / 0.8); }
.lg-k { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground) / 0.8); margin-bottom: 2px; }
.lg-poa { font-weight: 400; font-style: italic; color: var(--lg-mute); font-family: var(--mf-serif, serif); font-size: 15px; }
.lg-note { display: block; font-weight: 400; font-size: 11px; color: var(--lg-mute); }
.c-more i { display: block; width: 7px; height: 7px; margin: 0 auto; border-right: 1px solid var(--lg-mute); border-bottom: 1px solid var(--lg-mute); transform: rotate(45deg); transition: transform 0.25s; }
.lg-item.is-open .c-more i { transform: rotate(-135deg); }

.lg-table input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin: 0; vertical-align: -2px;
  border: 1px solid hsl(var(--muted-foreground) / 0.6); background: hsl(var(--background)); cursor: pointer; position: relative;
}
.lg-table input[type="checkbox"]:checked { background: var(--lg-ink); border-color: var(--lg-ink); }
.lg-table input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid hsl(var(--background)); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.lg-table input[type="checkbox"]:focus-visible { outline: 1px solid var(--lg-ink); outline-offset: 2px; }

/* Expanded particulars */
.lg-detail td { padding: 0; background: hsl(var(--secondary)); border-bottom: 1px solid var(--lg-line); }
.lg-detail-in { display: grid; grid-template-columns: 220px 1fr auto; gap: 28px; align-items: center; padding: 22px 16px 26px 46px; animation: lg-in 0.25s ease; }
@keyframes lg-in { from { opacity: 0; transform: translateY(-4px); } }
.lg-art { color: hsl(var(--foreground) / 0.75); }
.lg-art svg.bf5 .bf5-wave { stroke: currentColor; opacity: 0.35; }
.lg-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 24px; margin: 0; }
.lg-specs dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lg-mute); margin-bottom: 3px; }
.lg-specs dd { margin: 0; font-size: 14px; }
.lg-actions { display: flex; flex-direction: column; gap: 8px; }
.lg-btn {
  display: inline-flex; justify-content: center; padding: 11px 20px; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap;
  background: var(--lg-ink); color: hsl(var(--background)); border: 1px solid var(--lg-ink); cursor: pointer; text-decoration: none;
  transition: opacity 0.2s, background 0.2s;
}
.lg-btn:hover { opacity: 0.88; }
.lg-btn-ghost { background: transparent; color: var(--lg-ink); }
.lg-btn-ghost:hover { background: hsl(var(--background)); opacity: 1; }

.lg-page-link { font-size: 12px; letter-spacing: 0.02em; color: var(--lg-mute); text-decoration: none; text-align: center; padding-top: 4px; }
.lg-page-link:hover { color: var(--lg-ink); text-decoration: underline; text-underline-offset: 3px; }
html.vd-on .lg-request { display: none; }

.lg-empty { padding: 40px 12px !important; text-align: center; color: var(--lg-mute); }
.lg-empty button, .lg-empty a { all: unset; cursor: pointer; color: var(--lg-ink); text-decoration: underline; text-underline-offset: 3px; }
.lg-foot { margin: 18px 0 0; max-width: 60em; font-size: 12px; line-height: 1.6; color: var(--lg-mute); }

/* Selection bar */
.lg-request {
  position: fixed; left: 50%; bottom: 44px; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px; padding: 10px 10px 10px 24px;
  background: hsl(222 47% 8%); color: #fff; box-shadow: 0 18px 50px -12px hsl(222 47% 8% / 0.5);
  animation: lg-up 0.3s ease;
}
.lg-request[hidden] { display: none; }
@keyframes lg-up { from { opacity: 0; transform: translate(-50%, 10px); } }
.lg-request p { margin: 0; font-size: 13px; color: hsl(0 0% 100% / 0.7); white-space: nowrap; }
.lg-request b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.lg-request button { all: unset; cursor: pointer; font-size: 12px; letter-spacing: 0.06em; color: hsl(0 0% 100% / 0.6); }
.lg-request button:hover { color: #fff; }
.lg-request a {
  padding: 11px 20px; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none;
  background: #fff; color: hsl(222 47% 8%);
}
.lg-request a:hover { background: hsl(40 30% 94%); }

/* Narrow screens: the sheet collapses to a two-line list, price on the right. */
@media (max-width: 860px) {
  .lg-table .c-spec { display: none; }
}
@media (max-width: 680px) {
  html.lg-page.lg-ledger .bf-launcher { display: none; }
  .lg-eyebrow { font-size: 10px; letter-spacing: 0.18em; white-space: nowrap; }
  .lg-eyebrow::before { display: none; }
  .lg-table thead th { top: 68px; padding: 10px 6px; }
  .lg-table .c-built, .lg-table .c-loc { display: none; }
  .lg-table td { padding: 14px 6px; }
  .lg-table .c-type { width: 100%; }
  .lg-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--lg-mute); }
  .lg-sector { display: none; }
  .lg-table td.c-price { font-size: 13px; }
  .lg-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .lg-poa { font-size: 13px; }
  .lg-tools { width: 100%; }
  .lg-search { flex: 1; }
  .lg-search input { width: 100%; }
  .lg-sectors { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px; scrollbar-width: none; }
  .lg-sectors::-webkit-scrollbar { display: none; }
  .lg-sectors button { white-space: nowrap; }
  .lg-detail-in { grid-template-columns: 1fr; gap: 18px; padding: 18px 12px 22px; }
  .lg-art { max-width: 220px; }
  .lg-actions { flex-direction: row; flex-wrap: wrap; }
  .lg-request { left: 12px; right: 12px; transform: none; gap: 14px; padding-left: 16px; }
  @keyframes lg-up { from { opacity: 0; transform: translateY(10px); } }
  .lg-request p { flex: 1; }
}