/* brand.css: the components of the app, as Concept C. Loaded after tokens.css
   and theme.css. The face is Source Sans 3, served from this app's own
   static/fonts/. The sizes are large on purpose: 18px body text, 17px in
   tables, targets at least 48px tall, and a clear focus ring. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-italic.woff2") format("woff2");
}

body { background: var(--rst-bg); color: var(--rst-text); font-size: 1.125rem; line-height: 1.55; font-family: var(--rst-font); }
p, li { max-width: 66ch; }
::selection { background: light-dark(#ffe38a, #6b5517); color: var(--rst-text); }
:focus-visible { outline: 3px solid var(--rst-accent); outline-offset: 3px; }
a { color: var(--rst-accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { color: var(--rst-accent-strong); }
html { scrollbar-color: var(--rst-line-strong) var(--rst-surface-2); }

h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; text-wrap: balance; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 2.25rem 0 0.75rem; }
[rst-page-header] h1, .rst-page-header h1 { font-size: 2rem; font-weight: 700; }
[rst-field-label] { font-size: var(--rst-fs-base); font-weight: 600; }

.lic-frame { min-height: 100%; }
/* The next step after a flash message: a real link, not just a sentence,
   so the page a redirect lands on still says where to go once the
   one-shot flash above it is gone. */
.lic-next { margin: 0 0 1.5rem; font-weight: 600; }
/* Where a figure comes from: a source note, quieter than the figures beside it. */
.lic-source { font-size: 0.8125rem; color: var(--rst-text-muted); }
/* Cells sit top-aligned, so a smaller note would sit higher than the figures
   beside it. In a table with notes, every cell lines up on its first baseline. */
table:has(.lic-source) > tbody > tr > * { vertical-align: baseline; }
.lic-month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; max-width: none; }
/* Without this, the 66ch prose width above catches this nav like any other
   paragraph, wrapping it well short of the page's own width and splitting a
   label such as "Tax year to date" across two lines. */
.lic-period-nav { max-width: none; }
.lic-period-nav a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.lic-pdf { display: block; width: 100%; height: 75vh; min-height: 24rem; margin: 0 0 1.5rem; border: 1px solid var(--rst-line); }

/* The top bar stays on screen while the page scrolls under it, so the
   club's own navigation and its headline figure are never more than a
   glance away. z-index above the sticky table headers (z-index: 2)
   further down the page, so the bar stays on top of them, not under. */
[rst-shell-topbar] [rst-shell-bar] { position: sticky; inset-block-start: 0; z-index: 10; }
/* The nav centred in the bar, independent of the brand's width on one
   side and the account menu's on the other: taken out of the row's own
   flow and placed by the bar's own midpoint, rather than flex spacing,
   which can only ever centre two items that are the same width as each
   other. Held off until 1100px, the same width the page's own content
   column caps out at, rather than the framework's own 800px wide-layout
   threshold, which is tight enough to risk the nav overlapping the
   brand or a longer account label such as
   "name@example.com (Admin, Treasurer)". */
@media (min-width: 1100px) {
  [rst-shell-bar] { position: relative; }
  [rst-shell-nav] { position: absolute; left: 50%; transform: translateX(-50%); }
}
/* The value per member, under the brand so it reads as part of the
   club's own identity rather than as another nav item. */
.lic-shell-brand-group { display: flex; flex-direction: column; gap: 0.1rem; }
/* The value per member is the declared signature of the shell: it reads
   larger and bolder than the brand name above it and the nav beside it,
   not smaller and muted the way a caption would. The date stays a quieter
   secondary detail on the same line. */
.lic-shell-value { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--rst-text); }
.lic-shell-value-date { font-weight: 400; color: var(--rst-text-muted); }

/* Nav links and the mobile menu control at the 48px target this app
   promises elsewhere: tokens.css's own shell nav is sized for a compact
   toolbar, not a primary navigation a person taps on a phone. Set larger
   and bolder than that toolbar default too, with a little letter-spacing
   and more room between items - a primary nav read at a glance, not a
   row of small print. */
[rst-shell-nav] a { min-height: 48px; display: inline-flex; align-items: center; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 8px; }
/* tokens.css's own [rst-shell-topbar] [rst-shell-tail] > [rst-shell-nav] a
   (0,3,1) zeroes padding-inline from 800px up, and carries 0.6rem below
   it - both more specific than a plain [rst-shell-nav] a (0,1,1), which
   is why padding set there was silently never landing at either width.
   Matched here at the same selector chain so this wins at both, the way
   woodfamilytrust2's own brand.css does for the same collision. */
[rst-shell-topbar] [rst-shell-tail] > [rst-shell-nav] a { padding-inline: 0.75rem; }
/* A light fill on hover, the same pill a mouse rests on in
   woodfamilytrust2's own top bar - the text-colour-only change
   tokens.css gives every shell nav by default has nothing to rest the
   eye on. */
[rst-shell-nav] a:hover { background: var(--rst-surface-2); }
/* tokens.css sets a[aria-current] to font-weight: 550, a touch heavier
   than every other item here; at 600 that reads as the current page
   going bolder than its siblings. The gold underline already carries
   that signal on its own - matching it back to 600 leaves the
   underline the only mark of which page is open. */
[rst-shell-nav] a[aria-current] { font-weight: 600; }
[rst-shell-nav] { gap: var(--rst-sp-5); }
[rst-shell-topbar] [rst-shell-menu] > summary { min-block-size: 48px; }

/* The brand name itself, in the accent colour rather than plain text, so
   it reads as the club's own mark the way a logo would, with nothing
   else in the bar competing with it for that colour. */
.rst-shell__brand, [rst-shell-brand] { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--rst-accent-strong); font-size: 1.1875rem; }
/* The ascending-bars mark beside the brand name: its own three bars take
   the brand link's own colour (currentColor), so it stays legible in
   both themes the same way the text beside it does. Its small accent
   flourish is the mark's own ochre/gold, a shade apiece for light and
   dark - lighter and more saturated on dark so it still reads against
   navy, the same two shades the favicon switches on
   prefers-color-scheme. */
.lic-brand-mark { width: 1.5rem; height: 1.5rem; flex: none; }
.lic-brand-mark-accent { fill: light-dark(#C98A1E, #E8B04A); }
[rst-shell-topbar] [rst-shell-bar] { padding-block: 0.85rem; }

/* A nav badge (currently just Books' own unreconciled count) as a solid
   filled pill, closer to a notification count than tokens.css's own
   quiet bordered badge - that one is right for a status elsewhere on a
   page; here, beside nav text, it wants to read at a glance from across
   the bar. */
[rst-shell-nav] [rst-badge] { border-radius: 999px; padding: 0.1rem 0.5rem; margin-inline-start: 0.3rem; background: var(--rst-tone-positive-fg); border-color: var(--rst-tone-positive-fg); color: var(--rst-on-accent); }

/* The holdings box's own header: the title, with the club's total value
   beside it, and the value per member in the top right corner. Wraps to
   a stacked column on a narrow screen, the stat under the title. */
.lic-holdings-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; margin-bottom: 1rem; }
.lic-holdings-head h2 { margin: 0; }
.lic-holdings-head [rst-stat] { flex: 0 1 14rem; }
.lic-holdings-title { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.75rem; max-width: 28rem; }
/* The PDF download sits beside the heading as a plain icon control, not
   a full rst-btn: a second full-size button on the same line as an h2
   would outweigh the heading it sits next to. 40px keeps it close to
   the 44px row-control minimum used elsewhere while staying visually
   proportionate inline with heading text. */
.lic-holdings-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 0.4rem;
  vertical-align: middle;
  color: var(--rst-accent-strong);
  border-radius: 4px;
}
.lic-holdings-pdf:hover { background: var(--rst-surface-2); }
.lic-holdings-pdf .icon { width: 22px; height: 22px; }
.lic-holdings-total { font-size: 1rem; font-weight: 400; color: var(--rst-text-muted); }
/* The position picker, moved in beside the title: a compact row, not
   the full-width stacked form rst-form gives a page of its own. */
.lic-asof-picker { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; max-inline-size: none; }
.lic-asof-picker [rst-field] { margin: 0; }

/* Shared by the ii cash book and bank ledger search forms. */
.lic-ledger-search { margin: 1rem 0; }
/* The hint sits below the whole row, not inside the field block: inside
   it, its extra height pushed the field taller than the button beside
   it, so align-items: flex-end lined the button up with the hint
   instead of the input. */
.lic-ledger-search-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; max-inline-size: none; }
.lic-ledger-search-field { margin: 0; min-inline-size: 18rem; flex: 1 1 18rem; }

/* The page body. Generous room, one column. */
main[rst-page] { padding: 1.5rem 16px 3rem; max-width: 1100px; margin: 0 auto; min-width: 0; }

/* Buttons: large, one primary per page. Sizing applies to every variant;
   the accent fill is scoped off the plain rule so tokens.css's own ghost
   and danger variants (confirm-form's Cancel and its destructive submit),
   and form-foot's own plain Cancel just below, keep their own look. Those
   two kinds of Cancel are also excluded here rather than just out-specced
   by a later rule: [rst-btn]:not(...):not(...) carries THREE attribute
   selectors' worth of specificity (0,0,3,0), which already beats
   a[rst-btn="lg"]'s (0,0,1,1) on the attribute/class column alone, no
   matter which rule loads last or how many more exclusions are added -
   excluding it here is the only way this rule actually leaves it alone. */
[rst-btn] { min-height: 52px; padding: 0 1.4rem; font-size: 1.125rem; font-weight: 700; border-radius: 4px; border-width: 2px; border-style: solid; }
[rst-btn]:not([rst-btn~="ghost"]):not([rst-btn~="danger"]):not([rst-btn="lg"]) { background: var(--rst-accent); color: var(--rst-on-accent); border-color: var(--rst-accent); }
[rst-btn]:not([rst-btn~="ghost"]):not([rst-btn~="danger"]):not([rst-btn="lg"]):hover { background: var(--rst-accent-strong); border-color: var(--rst-accent-strong); }
/* Cancel is a link-button beside the one primary action: it reads as a way
   out, not as a second choice of the same weight. This covers form-foot's
   plain Cancel (rst-btn="lg" exactly, excluded above so there is no
   specificity fight to win); confirm-form's Cancel carries "ghost" too
   and keeps tokens.css's own ghost look instead, via the same exclusion. */
a[rst-btn="lg"] { background: var(--rst-surface); color: var(--rst-accent-strong); border: 2px solid var(--rst-line-strong); }
a[rst-btn="lg"]:hover { background: var(--rst-surface-2); border-color: var(--rst-line-strong); text-decoration: underline; }
td [rst-btn], th [rst-btn] { min-height: 44px; background: var(--rst-surface); color: var(--rst-accent-strong); border: 2px solid var(--rst-accent-strong); }
/* The file picker: a clear panel with a real button, not the browser's grey default. */
input[type="file"] { display: block; width: 100%; max-width: 36rem; min-height: 64px; padding: 0.6rem; font-size: 1.125rem; color: var(--rst-text); background: var(--rst-surface-2); border: 2px dashed var(--rst-line-strong); border-radius: 4px; cursor: pointer; }
input[type="file"]:hover { border-color: var(--rst-accent); }
input[type="file"]::file-selector-button { min-height: 48px; margin-right: 1rem; padding: 0 1.2rem; font: inherit; font-weight: 700; color: var(--rst-on-accent); background: var(--rst-accent); border: 2px solid var(--rst-accent); border-radius: 4px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--rst-accent-strong); border-color: var(--rst-accent-strong); }
input[type="file"]:focus-visible { outline: 3px solid var(--rst-accent); outline-offset: 3px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 1.125rem; min-height: 48px; border: 2px solid var(--rst-line-strong); border-radius: 4px; background: var(--rst-surface); color: var(--rst-text); padding: 0 0.6rem; }

/* Tables: 17px, plain rules, figures right-aligned in tabular numerals. A
   narrow screen stacks each row into a labelled card. */
.wft-table-scroll { position: relative; overflow-x: auto; margin: 0.5rem 0 1.5rem; }
table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; font-size: 1.25rem; font-weight: 700; padding: 0.5rem 0.4rem; position: sticky; left: 0; }
/* The stock count at the end of the Tracker caption reads as a quiet
   aside, not a second heading-weight statement competing with the
   first sentence. */
.lic-momentum-count { font-weight: 400; font-size: 1rem; color: var(--rst-text-muted); }
/* The Tracker's filter bar: several buttons press at once (a row matching
   any shows), unlike rst-seg-tabs's one-current-tab. Same pill-bar look as
   seg-tabs, keyed on aria-pressed rather than aria-current so it never
   silently reads as several "current pages" to a screen reader. */
.lic-momentum-filters { background: var(--rst-accent-soft); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 2px; max-inline-size: 100%; padding: 2px; width: max-content; margin: 0 0 1rem; }
.lic-momentum-filters a { border-radius: var(--rst-radius-sm); color: var(--rst-text-muted); font-size: var(--rst-fs-sm); font-weight: 550; padding: 5px 16px; text-decoration: none; }
.lic-momentum-filters a:hover { color: var(--rst-text); }
.lic-momentum-filters a[aria-pressed="true"] { background: var(--rst-surface); box-shadow: var(--rst-shadow-pop); color: var(--rst-text); font-weight: 600; }
.lic-people-count { font-weight: 400; font-size: 1rem; color: var(--rst-text-muted); }
th, td { text-align: left; vertical-align: top; padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--rst-line); }
thead th { font-weight: 700; border-bottom: 2px solid var(--rst-text); }
tbody th { font-weight: 600; }
td:first-child, th:first-child { position: sticky; left: 0; background: var(--rst-surface); white-space: nowrap; }
td:last-child, th:last-child { position: sticky; right: 0; background: var(--rst-surface); }
.wft-num { text-align: right; white-space: nowrap; }
tr.lic-total th, tr.lic-total td { font-weight: 700; border-top: 2px solid var(--rst-text); }
/* The one figure a section is for - profit/loss, the balance sheet's own
   total, capital at the end of the year - carries a second rule below it
   as well as the usual one above, the same double-ruled-off weight the
   club's own accounts give it on paper. */
tr.lic-grand-total th, tr.lic-grand-total td { border-bottom: 2px solid var(--rst-text); padding-bottom: 0.6rem; }
/* INCOME and EXPENDITURE read as part of the one account they divide,
   not a heading of their own: plain, uppercase, and quieter than a
   section's own h2, with room above to separate it from the rows before. */
tr.lic-account-section th { padding-top: 1.1rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rst-text-muted); border-bottom: 1px solid var(--rst-line); text-align: left; }
tr.lic-account-section:first-child th { padding-top: 0.75rem; }

/* The ledger tables on the Accounts page (income & expenditure, balance
   sheet, capital account, per member, FTSE comparison) share one column
   layout, so the amounts line up down the page instead of each table
   auto-sizing its columns to its own content. Only at 640px+: below
   that these stack into cards and colgroup widths don't apply. */
@media (min-width: 640px) {
  table.lic-ledger { table-layout: fixed; }
  table.lic-ledger col.lic-col-prior { width: 12%; }
  table.lic-ledger col.lic-col-line { width: 29%; }
  table.lic-ledger col.lic-col-amount { width: 12%; }
  table.lic-ledger col.lic-col-source { width: 47%; }
}

/* A section of a page can fold its long reference tables behind a disclosure.
   The summary is a plain link-style line, large enough to tap. */
.lic-more { margin: 1rem 0 1.5rem; }
.lic-more > summary { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--rst-accent-strong); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; cursor: pointer; }
.lic-more[open] > summary { margin-bottom: 0.5rem; }

/* A section of a page: a plain panel, no shadow. */
section[rst-box] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: 4px; padding: 1.25rem 1.4rem; margin: 1.5rem 0; }

/* A status is a word with a tone. */
[rst-status] { font-size: 1rem; font-weight: 700; }

/* A callout's text is never smaller than the body. */
/* max-width: none overrides the global 66ch prose measure (above): a
   callout is a bounded box already, not long-form reading, so its own
   text should fill the box rather than wrap narrow and leave the right
   side of a wide callout empty. */
[rst-callout] p { font-size: 1.125rem; max-width: none; }

/* The stacked card a table turns into on a phone. */
@media (max-width: 639px) {
  section[rst-box] { padding: 1rem; margin: 1rem 0; }
  /* A stacked table is cards, not a wide table: no scroll box, and a caption
     that spans the width instead of wrapping in a narrow column. */
  .wft-table-scroll:has(> table.lic-stack) { overflow: visible; }
  table.lic-stack caption { position: static; display: block; width: auto; }
  table.lic-stack, .lic-stack tbody, .lic-stack tr, .lic-stack th, .lic-stack td { display: block; min-width: 0; width: 100%; box-sizing: border-box; }
  .lic-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* A sortable table keeps its header row on a phone: the sort links live there. */
  table.lic-stack--sortable thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  table.lic-stack--sortable thead tr { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0 0 0.75rem; padding: 0; border: 0; }
  table.lic-stack--sortable thead th { display: inline-flex; padding: 0; border: 0; }
  .lic-stack tr { border: 1px solid var(--rst-line); border-radius: 4px; padding: 0.5rem 0.6rem; margin-bottom: 0.75rem; }
  .lic-stack th, .lic-stack td { border: 0; padding: 0.25rem 0.2rem; position: static; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  /* A quieter, smaller label than the value under it: it is there to
     name the figure, not to compete with it, and shrinking it keeps a
     two-line label (Dividend-style names run long) from reading as
     heavy as the figure itself. */
  .lic-stack td[data-th]::before { content: attr(data-th); display: block; font-size: 0.8125rem; line-height: 1.25; font-weight: 700; color: var(--rst-text-muted); }
  .lic-stack td:last-child, .lic-stack th:last-child, .lic-stack td:first-child, .lic-stack th:first-child { position: static; white-space: normal; }

  /* A sortable table's header keeps its sort links reachable on a phone
     (see the comment above), but the generic .lic-stack th rule above
     also hands every th width: 100% - unless undone here, an
     inline-flex link at full container width wraps onto its own line
     regardless of flex-wrap, turning an 11-column table into eleven
     full-width lines before a single row of data. Sized and bordered
     as a small pill instead of plain underlined text, matching the
     market-filter pills just below it rather than running twelve
     differently-styled controls down the page in two different looks. */
  table.lic-stack--sortable thead th { display: inline-flex; width: auto; padding: 0; border: 0; }

  /* A holding's card lays its figures in two columns, so fifteen fields
     take eight rows instead of fifteen. The symbol is the card's own
     title; the full name is its subtitle, not a second, redundantly
     labelled "Name" row repeating what the symbol already identifies.
     Market value and Gain/loss % - the two figures a glance is actually
     for - read larger than the rest, the way the club's own value per
     member does in the top bar. An empty cell (a totals row's blank
     columns) takes no room. */
  table.lic-holdings tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
  table.lic-holdings tbody th, table.lic-holdings tbody td[data-th="Name"] { grid-column: 1 / -1; }
  table.lic-holdings tbody td[data-th="Name"]::before { content: none; }
  table.lic-holdings tbody td[data-th="Name"] { margin-top: -0.3rem; color: var(--rst-text-muted); }
  table.lic-holdings tbody td[data-th="Market value"],
  table.lic-holdings tbody td[data-th="Gain/loss %"] { font-size: 1.1875rem; font-weight: 700; }
  table.lic-holdings tbody td:empty { display: none; }

  /* The Tracker's own table, the same two-column treatment: the company
     name is the card's title (no redundant label above it, promoted in
     size), its market badge sits beside its ticker rather than above
     the title, and the price - the one figure every row has, pending
     or not - reads larger than the rest. */
  table.lic-momentum tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
  table.lic-momentum tbody td[data-th="Company"] { grid-column: 1 / -1; order: -2; }
  table.lic-momentum tbody td[data-th="Company"]::before { content: none; }
  table.lic-momentum tbody td[data-th="Company"] { font-size: 1.125rem; font-weight: 600; }
  table.lic-momentum tbody td[data-th="Market"] { order: -1; }
  table.lic-momentum tbody td[data-th="Price"] { font-size: 1.1875rem; font-weight: 700; }
  table.lic-momentum tbody td:last-child:not([data-th]) { grid-column: 1 / -1; justify-self: end; }

  /* The Trustnet grid, the same treatment again: the fund's own name is
     the card's title, its quartile and rank sit beside each other as a
     fact about the fund rather than two separate labelled rows. */
  table.lic-trustnet tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
  table.lic-trustnet tbody td[data-th="Fund"] { grid-column: 1 / -1; order: -2; }
  table.lic-trustnet tbody td[data-th="Fund"]::before { content: none; }
  table.lic-trustnet tbody td[data-th="Fund"] { font-size: 1.125rem; font-weight: 600; }
  table.lic-trustnet tbody td[data-th="Quartile"] { order: -1; }

  /* A "brief" stacked table is still a card per row, but the prior year,
     the line and the amount sit on one line, and the source — a
     sentence that would otherwise take the most room — is dropped on
     a phone rather than wrapped onto three more. Its header stays on
     screen, once, rather than repeating "Line" and "Amount" in every
     card the way a plain stacked table's data-th labels would. */
  table.lic-stack--brief thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  table.lic-stack--brief thead tr, table.lic-stack--brief tbody tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.6rem; }
  table.lic-stack--brief thead tr { padding: 0 0.2rem 0.3rem; border: 0; }
  table.lic-stack--brief thead th { padding: 0; border: 0; font-size: 0.8125rem; font-weight: 700; color: var(--rst-text-muted); }
  table.lic-stack--brief tbody tr { align-items: baseline; }
  table.lic-stack--brief tbody tr > :nth-child(4),
  table.lic-stack--brief thead tr > :nth-child(4) { display: none; }
  table.lic-stack--brief td[data-th]::before { content: none; }
  table.lic-stack--brief tbody td:nth-child(1) { color: var(--rst-text-muted); font-size: 0.9375rem; }
}

/* Screen-reader text. */
[rst-sr-only] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The figures on a summary, in a plain two-column list. */
dl[rst-detail-list] { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 0.5rem 1.5rem; margin: 0; font-size: 1.125rem; }
dl[rst-detail-list] dt { color: var(--rst-text); }
dl[rst-detail-list] dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
time { white-space: nowrap; }

/* Popups keep to the plain panel. */
[rst-dropdown-menu], [rst-combo-list], [rst-dtp-list], [rst-row-menu-panel] { border-radius: 4px; font-size: 1.0625rem; }
[rst-dropdown-menu] a { display: block; box-sizing: border-box; min-height: 2.5rem; padding: 0.4rem 0.8rem; line-height: 1.3; }

/* The footer: the version, then the screen colours as three plain links. */
.lic-foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.lic-foot-version { margin: 0; }
/* The footer's Light, Dark and System switch, after woodfamilytrust2's own:
   a pill group of three, the current choice filled. Each is a link, so it
   works with JavaScript off; theme-toggle.js changes the page in place. */
.lic-theme-switch {
  margin-inline-start: auto;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--rst-line);
  border-radius: var(--rst-radius-pill);
  background: var(--rst-surface-2);
}
.lic-theme-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--rst-radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rst-text);
  text-decoration: none;
  box-sizing: border-box;
}
.lic-theme-switch a:hover { text-decoration: underline; }
.lic-theme-switch a[aria-current="true"] { background: var(--rst-accent); color: var(--rst-on-accent); }

/* A negative figure is drawn in the negative tone. The minus sign is in the
   text too, so the colour is never the only sign of it. */
.lic-neg { color: var(--lic-neg-fg); font-weight: 600; }

/* The audit log's own payload: a full-width row of its own under each
   entry, raw JSON that runs on far longer than a hash ever does and has
   none of prose's own spaces to wrap at - a 64-character hash is one
   unbroken word. Folded behind a disclosure, closed by default, rather
   than spelled out for all 200 rows at once. Open, it picks out an
   accent left border and tint, the same way a jumped-to row elsewhere on
   the site (:target) picks itself out, so the open one is not lost once
   several are open at once. */
.lic-log-payload-row > td { padding: 0; border-bottom: 1px solid var(--rst-line); }
.lic-log-payload { padding: 0.3rem 0.75rem; border-left: 3px solid transparent; }
.lic-log-payload > summary { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; list-style: none; font-size: 0.95rem; color: var(--rst-text-muted); }
.lic-log-payload > summary::-webkit-details-marker { display: none; }
.lic-log-chevron { display: inline-flex; transition: transform 0.15s ease; transform: rotate(-90deg); }
.lic-log-payload[open] { border-left-color: var(--rst-accent); background: var(--rst-surface-2); }
.lic-log-payload[open] > summary { color: var(--rst-accent-strong); font-weight: 700; }
.lic-log-payload[open] .lic-log-chevron { transform: rotate(0deg); }
.lic-log-detail { display: block; margin: 0 0 0.6rem; max-width: 60rem; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 0.9rem; }

/* The value-history chart's own legend, under it: what a solid point is
   against a hollow one, in words as well as the shape - the chart's own
   aria-label says as much for a screen reader, but a sighted reader
   looking at the chart itself needs it written down too, not only on
   hover. */
.lic-chart-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0.5rem 0 0; color: var(--rst-text-muted); font-size: 0.95rem; }
.lic-chart-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.lic-chart-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; border: 1.5px solid currentColor; box-sizing: border-box; }
.lic-chart-dot--hollow { background: none; }
.lic-chart-line { flex: none; width: 1.1rem; height: 0; border-top: 2px solid currentColor; }
.lic-chart-line--dashed { opacity: 0.6; border-top-style: dashed; }

/* A long listing keeps its column headings in view as the page scrolls past
   it, the way woodfamilytrust2 does it: sticky does not work inside a box
   that scrolls sideways - a <th> under position: sticky silently never
   sticks, it just sits at its static position and scrolls away with
   everything else, if any ancestor between it and the page is itself a
   scroll container, even one that never actually has anything to scroll.
   So from 1024px, where the widest listing (including the holdings table)
   fits the page, the listing's box takes overflow: visible instead, and the
   heading sticks to the page itself rather than to a scrollbar of its own.
   Narrower, the table keeps its own sideways scroll and has no sticky
   heading. Below 640px the listing stacks into cards, which have no
   heading row to keep. */
@media (min-width: 1024px) {
  .wft-table-scroll:has(> table.lic-stack) { overflow: visible; }
  /* The top bar is sticky too (see [rst-shell-bar] above) and sits in front
     (z-index: 10) of whatever scrolls under it, so top: 0 here would stick
     the heading exactly behind the bar rather than below it. sticky-offset.js
     measures the bar's real, variable height into --lic-topbar-h; 0px until
     it has run, same as before it existed. */
  table.lic-stack thead th { position: sticky; top: var(--lic-topbar-h, 0px); z-index: 2; background: var(--rst-surface); }
  /* td:first-child/th:first-child and :last-child further up this file
     stick the first and last column to the edges of the table's own
     sideways-scrolling box, so they stay in view while the table scrolls
     under them. With overflow: visible just above, this table no longer
     scrolls sideways of its own - and left: 0/right: 0 then sticks every
     row's cell to the nearest actual scrolling box instead, which inside
     .lic-wide's own transform is not the table at all: every row's first
     and last cell piled up at the same spot, on top of each other and of
     the header. Switched off here; nothing left to stick to. */
  table.lic-stack td:first-child, table.lic-stack th:first-child,
  table.lic-stack td:last-child, table.lic-stack th:last-child { position: static; }
  table.lic-stack thead th:first-child, table.lic-stack thead th:last-child {
    position: sticky; top: var(--lic-topbar-h, 0px); left: auto; right: auto; z-index: 2; background: var(--rst-surface);
  }
}

/* The holdings box takes nearly the whole window from 1024px, so its wide
   table needs less sideways scrolling. It is centred on the window, not on
   the page's own column. */
@media (min-width: 1024px) {
  .lic-wide { position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(calc(100vw - 32px), 1640px); max-width: none; padding-left: 0.75rem; padding-right: 0.75rem; }
  table.lic-contrib { font-size: 0.95rem; }
  table.lic-contrib th, table.lic-contrib td { padding-left: 0.3rem; padding-right: 0.3rem; }
  table.lic-holdings { font-size: 0.95rem; }
  table.lic-holdings th, table.lic-holdings td { padding-left: 0.3rem; padding-right: 0.3rem; }
}

/* Units and book cost are the third and sixth columns of every row. Between
   640px and 1440px the table has no room for them beside the returns, so they
   are left out there; phones keep the card with every figure, and wide
   windows keep the whole table. */
@media (min-width: 640px) and (max-width: 1439px) {
  table.lic-holdings tr > :nth-child(3), table.lic-holdings tr > :nth-child(6) { display: none; }
}

/* Sortable holdings headings: each is a button that looks like the text it
   was, with an arrow once the column is sorted. */
/* The sorted column's own header: a filled background, not just the
   arrow, so which column a table is currently sorted by is obvious at
   a glance rather than something to look closely for. The word and the
   arrow still carry the fact on their own (aria-sort, and the arrow
   glyph) - this is a second, louder signal on top, not the only one. */
table.lic-holdings thead th[aria-sort], table.lic-momentum thead th[aria-sort], table.lic-trustnet thead th[aria-sort] { background: var(--rst-accent-soft); }
table.lic-holdings thead th .lic-sort, table.lic-momentum thead th .lic-sort, table.lic-trustnet thead th .lic-sort { all: unset; cursor: pointer; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
table.lic-holdings thead th .lic-sort:focus-visible, table.lic-momentum thead th .lic-sort:focus-visible, table.lic-trustnet thead th .lic-sort:focus-visible { outline: 3px solid var(--rst-accent); outline-offset: 3px; }
/* The arrow is the only thing on the page saying which column a table is
   sorted by, so it needs to read as a different, louder mark than the
   bold label beside it - the accent colour and a larger size, not just
   inherited bold-on-bold that a glance can miss. */
table.lic-holdings thead th .lic-sort-arrow, table.lic-momentum thead th .lic-sort-arrow, table.lic-trustnet thead th .lic-sort-arrow { white-space: pre; color: var(--rst-accent-strong); font-size: 1.15em; }

/* On a phone the sort links are a stacked table's header row, not a
   header cell's own control, so they read better as small bordered
   pills - matching the market-filter pills beside them - than as plain
   underlined text at body size. Declared after the desktop .lic-sort
   rule above (not inside the earlier @media block) so it wins at equal
   specificity regardless of source order within this file. */
@media (max-width: 639px) {
  table.lic-stack--sortable thead th .lic-sort { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border: 1px solid var(--rst-line); border-radius: 999px; font-size: 0.9375rem; text-decoration: none; }
  table.lic-stack--sortable thead th[aria-sort] .lic-sort { border-color: var(--rst-accent); color: var(--rst-accent-strong); }
}

/* momentum-sort.js hides a filtered-out row with the hidden attribute; this
   guards it against the .lic-stack narrow-screen rule above, a class
   selector of equal specificity that would otherwise win on source order. */
tr[hidden] { display: none !important; }

/* Books: a hub of two plain links, each with what it holds. */
.lic-books { list-style: none; margin: 0; padding: 0; }
.lic-books li { padding: 1rem 0; border-bottom: 1px solid var(--rst-line); }
.lic-books li:first-child { border-top: 1px solid var(--rst-line); }
.lic-books a { font-size: 1.25rem; font-weight: 700; }
.lic-books p { margin: 0.25rem 0 0; color: var(--rst-text-muted); }

/* A line classified from its row menu: the choice and Save stack in the panel. */
/* The Momentum page's action buttons, each its own form (a different POST
   target apiece, so they cannot share one form): a row with a gap, not the
   stack of touching blocks a bare sequence of <form> elements renders as. */
.lic-momentum-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.25rem; }
.lic-momentum-actions form { margin: 0; }

/* Momentum's own rows, tighter than the shared 0.75rem: fourteen columns
   of mostly short figures read better dense, and this table is screening
   data to glance down, not a record to read line by line. */
table.lic-momentum th, table.lic-momentum td, table.lic-trustnet th, table.lic-trustnet td { padding-block: 0.4rem; }

.lic-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; }
.lic-inline select { min-width: 12rem; max-width: 100%; }
/* A row's menu sits above the rows below it. Its cell is not sticky, so the
   cell does not paint over the panel, and the panel is wide enough for its
   choice. */
td:has(> details[rst-row-menu]) { position: static; }
[rst-row-menu] > summary { width: 44px; height: 44px; }
[rst-row-menu-panel] button[rst-btn] { display: inline-flex; width: auto; min-height: 48px; background: var(--rst-accent); color: var(--rst-on-accent); border: 2px solid var(--rst-accent); text-decoration: none; }
@media (min-width: 640px) {
  /* The holdings table can carry Morningstar's three return columns beside
     the ii figures, so its cells take less padding to fit a desktop width. */
  table.lic-holdings { font-size: 1rem; }
  table.lic-holdings th, table.lic-holdings td { padding-left: 0.35rem; padding-right: 0.35rem; }
  /* Not for a .lic-stack table (holdings, momentum): its own 1024px rule
     above already governs overflow and sticky headers together. Applying
     this one too, from 640px, would drop its scroll box three breakpoints
     before that rule supplies the sticky heading that is meant to replace
     it, leaving the table to spill past the page with no scrollbar and no
     sticky heading for the width in between. */
  .wft-table-scroll:has(td > details[rst-row-menu]):not(:has(table.lic-stack)) { overflow: visible; }
}
[rst-row-menu-panel] { position: absolute; z-index: 10; right: 0; left: auto; min-width: 18rem; max-width: calc(100vw - 2rem); background: var(--rst-surface); padding: 0.6rem; }
.lic-inline select { min-width: 14rem; }
[rst-row-menu-panel] form { margin: 0; }
[rst-row-menu-panel] .lic-inline { flex-direction: column; align-items: stretch; }
[rst-row-menu-panel] .lic-inline label { font-weight: 600; }
[rst-row-menu-panel] button:not([rst-btn]) { display: block; width: 100%; min-height: 44px; padding: 0 0.6rem; text-align: left; background: none; border: 0; color: var(--rst-accent-strong); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
[rst-row-menu-panel] a { display: flex; align-items: center; min-height: 44px; padding: 0 0.6rem; font-weight: 600; }