/* ---------------------------------------------------------------- reading
 * templates/ui/reading.html. The reading page (owner brief B.2): breadcrumb,
 * page head with a meta line (date, tag), the reading column, the source
 * line, the disclaimer. News post, document detail and the publication of
 * the Monthly Investment View are built the same way.
 *
 * .prose is the reading column: body role, at most 64ch. Its running text
 * is justified with automatic hyphenation in the language of the element
 * (WEB-TYP-06, ENT-427); titles, table cells, captions, units and sources
 * stay left-aligned without hyphenation (ENT-434 no. 72). Every text role
 * Light 300 (WEB-TYP-02); hierarchy by size, colour and rules.
 *
 * The verified Monthly arrives as a mail card with its own inline styles;
 * the page maps it onto this column (services/reading.py) - the card
 * classes below (.monthly-reader, .table-title, .kpi-grid, figure) are the
 * mail's own names, typeset here in the portal's roles. */
@layer ui {
.reading { max-width: var(--measure); min-width: 0; }
.reading--wide { max-width: none; }

.prose { max-width: var(--measure); font-size: var(--t-body); line-height: 1.7; }
.prose--full, .prose--full p, .prose--full ul, .prose--full ol { max-width: none; }
.prose p { margin: 0 0 var(--s-4); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* Not running text: captions, units, sources, key-figure labels
   (ENT-434 no. 72). */
.prose .table-subtitle, .prose .unit, .prose .source, .prose .table-source, .prose .monthly-source,
.prose .monthly-author, .prose figure p, .prose .kpi-item p, .prose td p, .prose th p {
  text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.prose ul, .prose ol { padding-left: var(--s-4); margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose strong, .prose b { font-weight: 300; color: var(--ink); }
.prose a { color: var(--corum); }
.prose img, .prose svg { max-width: 100%; height: auto; }

/* Section and block title in the h3 role. No red short rule under it
   (K-36, open point 16 of 20_WEB.md: the minor hairline does not stand
   under subheads, MAR-HAA-04). */
.prose h2, .prose h3 { font-size: var(--t-h3); font-weight: 300; color: var(--ink); margin: var(--s-7) 0 var(--s-3); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }.prose h4, .prose .table-title, .prose figcaption {
  font-size: var(--t-h3); font-weight: 300; line-height: 1.4; color: var(--ink); margin: var(--s-6) 0 var(--s-1);
}
/* Unit and subtitle under a table or chart title; notes and sources. */
.prose .table-subtitle, .prose .unit { font-size: var(--t-micro); font-style: normal; color: var(--graphite);
  margin: 0 0 var(--s-2); }
.prose small { display: block; font-size: var(--t-micro); color: var(--graphite); margin-bottom: var(--s-5); }
.prose .source, .prose .table-source, .prose .monthly-source {
  font-size: var(--t-micro); line-height: 1.5; color: var(--graphite); margin: var(--s-2) 0 var(--s-4);
}
/* Footnote numerals: superscript in --corum (owner brief B.3). */
.prose sup { font-size: var(--t-micro); line-height: 0; color: var(--corum); }

/* Tables inside a publication: the anatomy of every portal table
   (WEB-TAB-02, WEB-TAB-17) - slate above, graphite under the head, ink at the close,
   mist inside; head Light in the table size, bottom-aligned; figures right. */
.prose table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: var(--t-small);
  margin: 0 0 var(--s-2); border-top: 1px solid var(--slate); }
.prose thead th { position: static; white-space: normal; vertical-align: bottom; text-align: left;
  padding: var(--s-2) var(--s-3) var(--s-2) 0; font-size: var(--t-small); font-weight: 300; color: var(--ink);
  border-bottom: 1px solid var(--graphite); }
.prose tbody td, .prose tbody th { padding: var(--s-2) var(--s-3) var(--s-2) 0; vertical-align: top;
  font-weight: 300; border-bottom: 1px solid var(--mist); }
.prose tbody tr:last-child td, .prose tbody tr:last-child th { border-bottom: 1px solid var(--ink); }
.prose tbody tr:hover { background: transparent; }
.prose [align="center"] { text-align: center; }
.prose th[align="right"], .prose td[align="right"] { text-align: right; font-variant-numeric: tabular-nums;
  width: 1%; white-space: nowrap; padding-left: var(--s-5); overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 720px) { .prose thead th[align="right"] { white-space: normal; } }
/* On the phone a table wider than the column scrolls inside itself; the
   page never scrolls sideways (owner brief F). */
@media (max-width: 720px) {
  .prose table:not([role="presentation"]) { display: block; overflow-x: auto; }
}
.prose td:not([align="right"]), .prose th:not([align="right"]) { overflow-wrap: anywhere; }
.prose h4 + table, .prose .table-title + .table-scroll, .prose .table-subtitle + .table-scroll { margin-top: var(--s-2); }
.prose .table-scroll { max-width: 100%; overflow-x: auto; margin: var(--s-5) 0 var(--s-2); }

/* The market table the portal appends (FMB-TAB-22) is a financial table:
   labels break between words only, never letter by letter (WEB-TAB-04,
   WEB-TAB-05); below compact it stays a table, scrolls inside its own
   frame and keeps the name column pinned (WEB-TAB-12). Its heading keeps
   the section spacing of every h3 although it opens its own block. */
.prose .market-table > h3:first-child { margin-top: var(--s-7); }
.prose .market-table th, .prose .market-table td { hyphens: manual; }
@media (max-width: 720px) {
  .prose .market-table table { display: block; overflow-x: auto; }
  .prose .market-table th:first-child, .prose .market-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--paper); }
}

/* The Monthly: key figures two by two, then one column on the phone. */
.prose .kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5);
  margin: var(--s-5) 0; }
.prose .kpi-item { padding: 0 0 var(--s-3); }
.prose .kpi-item h3 { font-size: var(--t-figure); line-height: 1.2; margin: 0; }
.prose .kpi-item p { margin: 0; }
.prose .kpi-rule { display: block; width: 34px; border-top: 2px solid var(--corum); margin: var(--s-2) 0; }
@media (max-width: 720px) { .prose .kpi-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
.prose .source-heading { margin: 0 0 var(--s-6); padding-bottom: var(--s-3); border-bottom: 1px solid var(--silver); }

/* The Monthly's bar charts: a layout table of label, bar picture, value -
   no rules, fixed shares of the width, the value in tabular figures. */
.prose figure { margin: var(--s-6) 0; break-inside: avoid; }
.prose table[role="presentation"] { border-top: 0; margin: 0; }
.prose table[role="presentation"] td,
.prose table[role="presentation"] tr:last-child td { border-bottom: 0; padding: var(--s-1) 0; vertical-align: middle;
  overflow-wrap: normal; }
.prose table[role="presentation"] td:first-child { width: 40%; padding-right: var(--s-3); }
.prose table[role="presentation"] td:nth-child(2) { width: 42%; }
.prose table[role="presentation"] td:last-child { width: 18%; padding-left: var(--s-2); text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.prose table[role="presentation"] img { display: block; width: 100%; height: 1.5rem; }

/* What comes with the text: the original files, then older and newer. */
.reading__files { margin-top: var(--s-5); }
.reading-tools { margin: 0 0 var(--s-6); }
.reading-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: baseline;
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--cloud); font-size: var(--t-small); }
.reading-nav__meta { margin-left: .4em; font-size: var(--t-micro); color: var(--graphite); }
.reading-nav__all { margin-left: auto; }
.reading-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.reading-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--cloud); }
.reading-list__meta { font-size: var(--t-micro); color: var(--graphite); }
.reading-more { margin-top: var(--s-3); }
.page-head__note { flex-basis: 100%; margin: 0; font-size: var(--t-micro); color: var(--corum); }

/* Printed (the publication's «Save as PDF»): the sheet only - no masthead,
   navigation, breadcrumb, tools or footer; A4, nothing split across pages
   that can stay whole. */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  .crumb, .reading-nav, .reading-tools, .reading__files, .masthead, .footer { display: none !important; }
  .shell { max-width: none; padding: 0; }
  .reading, .prose { max-width: none; }
  .prose figure, .prose table, .prose img { break-inside: avoid; }
}
}  /* @layer ui */