/* Home: a reading page, not a dashboard.
 *
 * The page it replaced was a grid of glass cards, each competing for the eye,
 * and a reader could not tell from it what the product was for. This is
 * deliberately quieter: one column, generous measure, and hierarchy carried by
 * type rather than by containers. There is exactly one accent, and it marks
 * the reader's own answer — not a rise, not a fall. A match is neither profit
 * nor good news, and colouring it green would say it was.
 */

.home-screen { display: flex; flex-direction: column; gap: 34px; max-width: 100%; min-width: 0; }
/* The screen is itself a flex item of the page column, and the page column of
   the main frame. Each has to be allowed to shrink or the widest thing inside
   — a table with a floor on its width — sets the width of the whole document,
   and a phone shows the page cut off at its right edge. */
.journal-home, .journal-home > * { min-width: 0; }
/* journal.css sets flex-wrap: wrap on the page column's first child, which is
   this screen. A wrapping column is a MULTI-LINE flex container, and in one
   of those a stretched item takes the width of its LINE — the widest item in
   it — rather than the container's. So one table with a floor on its width
   made every section on the page 420px wide on a 375px phone. Single line,
   with more specificity than the rule that wrapped it; and the scroll box
   contributes no intrinsic width of its own, so the table can only ever
   scroll inside it.

   The selector matches journal.css's shape — id, class, pseudo-class,
   element — and adds a class, because a plainer one lost the cascade to it
   and quietly did nothing. */
#app .om-scr > div.home-screen:first-child { flex-wrap: nowrap; }
.arena-scroll { contain: inline-size; width: 100%; }
/* A flex item will not shrink below its content's min-width by default, so a
   table with a min-width inside a column widened the whole document and cut
   the page off at the right edge on a phone. The table scrolls inside its own
   box; the page never does. */
.home-screen > * { min-width: 0; }
.arena-scroll { max-width: 100%; }

.home-intro h1 {
  font-family: var(--font-heading);
  font-size: clamp(27px, 4.4vw, 40px); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.18; margin: 0;
  text-wrap: balance; max-width: 19ch;
}
.home-intro p {
  margin: 10px 0 0; font-size: 17px; line-height: 1.6;
  color: var(--t2); max-width: 46ch; text-wrap: pretty;
}

.home-screen h2 {
  font-family: var(--font-heading);
  font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 0;
}
.home-sub { margin: 6px 0 0; font-size: 14px; color: var(--t2); }
/* Every count on this page is followed by one of these, and that is the
   point: a number without its denominator, its date and its coverage is a
   number pretending to be a finding. */
.home-note {
  margin: 12px 0 0; font-size: 12px; line-height: 1.6;
  color: var(--faint); max-width: 58ch; text-wrap: pretty;
}

/* ── the session ────────────────────────────────────────────────────────── */

.breadth-bar {
  display: flex; margin-top: 16px; height: 10px; border-radius:var(--radius-island);
  overflow: hidden; background: var(--sunk);
}
.breadth-bar span { display: block; min-width: 2px; }
.breadth-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px 18px;
}
.breadth-list li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.breadth-list b {
  font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.breadth-list span { font-size: 12px; color: var(--t2); line-height: 1.35; }

/* ── the ledger ─────────────────────────────────────────────────────────── */

.home-arena { border-top: 1px solid var(--rule); padding-top: 24px; }
.arena-count { margin: 12px 0 0; display: flex; align-items: baseline; gap: 9px; }
.arena-count b {
  font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.arena-count span { font-size: 14px; color: var(--t2); }

/* ── context ────────────────────────────────────────────────────────────── */

.home-context { border-top: 1px solid var(--rule); padding-top: 24px; }
.home-context-head {
  font-family: var(--font-heading);
  font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 16px;
}

@media (max-width: 560px) {
  .home-screen { gap: 28px; }
  .breadth-list { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}

/* ── the models, as a ledger ────────────────────────────────────────────── */

.arena-scroll { overflow-x: auto; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.arena-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  font-variant-numeric: tabular-nums; min-width: 420px;
}
.arena-table th, .arena-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--rule); text-align: start;
  vertical-align: baseline;
}
.arena-table thead th {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 500;
}
.arena-table tbody th { font-weight: 500; }
.arena-table .arena-num { text-align: end; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
/* Group rows are headings inside the table, not data: quiet, and never
   coloured as though one group had won. */
.arena-group th {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t2);
  padding-top: 16px; border-bottom: 0;
}

/* ── BREADTH ────────────────────────────────────────────
 *
 * Three numbers as one bar, beside the index levels they belong with. It was
 * a 160px conic-gradient ring at the far end of a four-island board: a ring
 * is read by comparing arc lengths, which nobody can actually do, and the
 * comparison it exists to make — how much of the market went which way — was
 * two screens below where the market's close is printed.
 *
 * The counts sit ON the keys rather than only in a sentence underneath. A
 * stacked bar with no numbers on it is a decoration.
 */
#app .breadth-strip {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-island); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
#app .breadth-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
#app .breadth-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
#app .breadth-of {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 12px; color: var(--faint);
}
#app .breadth-bar {
  display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rule);
  /* The bands are proportions of the market, so they read left-to-right in
     both languages — flipping them in Arabic would put "rose" at the end of
     a bar whose first band is the biggest. */
  direction: ltr;
}
#app .breadth-bar > i { display: block; height: 100%; }
#app .breadth-keys {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 12px;
}
#app .breadth-key { display: inline-flex; align-items: baseline; gap: 7px; color: var(--t2); }
#app .breadth-key > i {
  width: 10px; height: 10px; border-radius: 2px; align-self: center;
  border: 1px solid var(--rule); flex: none;
}
#app .breadth-key strong { color: var(--ink); font-weight: 600; }
#app .breadth-key small { color: var(--faint); font-size: 11px; }
#app .breadth-note {
  margin: 0; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; color: var(--faint); line-height: 1.5;
}
@media (max-width: 860px) {
  #app .breadth-strip { padding: 16px; }
  #app .breadth-keys { gap: 6px 14px; font-size: 12px; }
}

/* ── WHAT CHANGED TODAY ──────────────────────────────────────────────────
 * The redesign's business card, three across. Every one carries the same
 * six parts in the same order — dateline, the shape it is drawn in, one
 * sentence, the picture, what the picture does not say, the document — so
 * the row reads as a publication rather than three widgets.
 */
#app .ct-shelf { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#app .ct-shelf-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#app .ct-shelf-head h2 { font-size: 17px; font-weight: 600; margin: 0; }
#app .ct-shelf-note {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 12px; color: var(--faint);
}
#app .ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#app .ct-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-island); padding: 18px;
  display: flex; flex-direction: column; gap: 11px;
}
#app .ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#app .ct-dateline {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 12px; color: var(--faint);
}
/* The name of the shape. It is here because the five primitives are a closed
   set: saying which one this is teaches the vocabulary a page at a time. */
#app .ct-primitive {
  flex: none; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; letter-spacing: .09em; color: var(--t2);
  background: var(--sunk); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
#app .ct-title { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0; }
#app .ct-rule { height: 1px; background: var(--rule); }
#app .ct-visual { min-width: 0; }
#app .ct-limit { margin: 0; font-size: 14px; color: var(--t2); line-height: 1.55; }
#app .ct-foot { display: flex; flex-direction: column; gap: 8px; }
#app .ct-more {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--accent) !important;
  min-height: 32px; display: flex; align-items: center; text-align: start;
}
#app .ct-more:hover { color: var(--ink) !important; }
@media (max-width: 1100px) { #app .ct-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { #app .ct-grid { grid-template-columns: 1fr; } }

/* One share bar per company in ما تغيّر اليوم.
 *
 * Each row is its own company's capital: a name a reader can open, the share
 * that is disclosed as a figure, and the bar under it. The rows are separated
 * by space rather than by rules, because three ruled rows inside a card that
 * already has two rules of its own reads as a table nested in a card. */
#app .ct-own-stack { display: flex; flex-direction: column; gap: 14px; }
#app .ct-own-row { display: flex; flex-direction: column; gap: 6px; }
#app .ct-own-name {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-align: start; color: inherit; font: inherit;
}
#app .ct-own-name:hover .ct-own-label { text-decoration: underline; }
#app .ct-own-code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: .06em; color: var(--ink); font-weight: 600;
}
#app .ct-own-label { font-size: 14px; color: var(--t2); min-width: 0; }
#app .ct-own-known {
  margin-inline-start: auto; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--faint);
}

/* THE CARD THAT WAS TWICE ITS NEIGHBOURS' HEIGHT.
 *
 * Three ct-cards sit in one row. Two came to 398 and 476; this one came to
 * 767, so the row was as tall as the tallest and the other two had ~300px of
 * dead space under them. That dead space is the "weird gap below" in the
 * report, and it was never a gap property — it was one card growing.
 *
 * It grew because nothing here was held to a line. A holder's name is long
 * enough to claim a whole legend line on its own, so three holders became
 * three stacked lines; and the disclosed percentage, pushed to the far end by
 * margin, wrapped to a second line whenever the company name was long. A row
 * that should be name / bar / legend was running to five and six lines.
 *
 * So hold each row to three lines. The company name and its disclosed figure
 * share one line and the descriptive label yields first, because the code and
 * the percentage are the data and the label is the courtesy. The legend runs
 * on one line with the names shortened to fit.
 *
 * Nothing is dropped: every holder still has its swatch and its share of the
 * bar, and the whole row opens the ownership board where the names are set
 * out in full with room to read them. This is the preview, not the record. */
#app .ct-own-row .ct-own-name { flex-wrap: nowrap; }
#app .ct-own-row .ct-own-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto;
}
#app .ct-own-row .ct-own-code,
#app .ct-own-row .ct-own-known { flex: 0 0 auto; }
#app .ct-own-row .pv-share-keys {
  flex-wrap: nowrap; margin-top: 7px; gap: 0 10px; overflow: hidden;
}
#app .ct-own-row .pv-share-key {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .ct-own-row .pv-share-key i { flex: 0 0 auto; }

/* Turn 6, block 9: the reader's own list, on Home.
 *
 * Four cards across at desk width, two on a tablet, one on a phone — the
 * comp's own 4-up, but the count follows the space rather than the design
 * width, so a card never falls below the ~150px its close and move need.
 * The card is a button because every one of them goes somewhere. */
/* The reader's followed companies.
 * Four cards across at desk width, two on a tablet, one on a phone — the
 * comp's own 4-up, but the count follows the space rather than the design
 * width, so a card never falls below the ~150px its close and move need.
 * The card is a button because every one of them goes somewhere. */
#app .home-watch {
  border-radius: var(--radius-island); background: var(--surface);
  border: 1px solid var(--edgeIn); box-shadow: var(--sh); padding: 22px 24px 20px;
  transition: box-shadow .2s ease;
}
#app .home-watch-title {
  font: 600 17px/1.4 var(--font-heading); margin: 0 0 16px;
  letter-spacing: -.01em; color: var(--ink);
}
#app .home-watch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 16px;
}
#app .home-watch-card {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto 1fr;
  row-gap: 6px; column-gap: 10px;
  align-items: center; text-align: start; min-width: 0;
  min-height: 154px;
  padding: 16px 18px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--edgeIn);
  color: inherit; font: inherit; cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
  position: relative;
}
#app .home-watch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.09), 0 4px 10px rgba(0, 0, 0, 0.03);
  border-color: var(--accent);
}
#app .hw-code {
  grid-column: 1; grid-row: 1;
  font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  letter-spacing: .06em; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; width: fit-content;
  padding: 3px 9px; border-radius: 6px;
  background: var(--sunk); border: 1px solid var(--rule);
}
/* The move sits beside the code, so the two things a follower checks first
   are on one line and the name below can take the width it needs. */
#app .hw-pct {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: rgba(18, 107, 117, 0.08);
}
#app .hw-name {
  grid-column: 1 / -1; grid-row: 2;
  font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--t2);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .hw-close {
  grid-column: 1 / -1; grid-row: 3;
  font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.2;
  margin-top: 4px;
}
#app .hw-spark {
  grid-column: 1 / -1; grid-row: 4;
  margin-top: 8px; width: 100%; height: 28px;
}
/* The sector, then the window the line is drawn over. The exchange's own
   sector names run long — "Industrial Goods , Services and Automobiles" is
   one of twelve — and this tile is a quarter of a row, so the line is clipped
   with an ellipsis rather than allowed to wrap into the card below it. The
   whole name is on the company's own screen, one click away. */
#app .hw-note {
  grid-column: 1 / -1; grid-row: 5;
  margin-top: 2px; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; color: var(--faint); align-self: end;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .hw-mark {
  grid-column: 1 / -1; grid-row: 6;
  margin-top: 6px; font-size: 11px; font-weight: 500; color: var(--accent);
  background: var(--accTint); padding: 3px 9px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
}

/* The quiet-day card in ما تغيّر اليوم.
 * Deliberately the same size and position as a real card but without its
 * furniture — no dateline, no primitive name, no rule, no chip — so it reads
 * as an answer rather than as a card that failed to load. */
#app .ct-card.ct-none {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  background: var(--sunk); border-style: dashed;
}
#app .ct-none-line { margin: 0; font: 600 14px/1.45 var(--font-heading); color: var(--t2); }
#app .ct-none-why { margin: 0; font-size: 12px; line-height: 1.6; color: var(--faint); }

/* The empty Following shelf: recognisable companies, each with its own Follow.
 *
 * The card splits into two controls because it does two things — open the
 * company, or follow it — and one <button> inside another is invalid HTML
 * that a keyboard cannot reach. They sit in one bordered tile so the pair
 * still reads as one company. */
#app .home-watch-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--t2); max-width: 62ch; }
#app .home-watch-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--faint); }
/* `align-items: stretch`, because the plain card above is a grid that centres
 * its items, and as a column of two buttons that centring shrank each button
 * to its own text and set it mid-card: a long name filled the tile, a short
 * one sat in the middle of it (the owner's phone, 28 Sep 2026). */
#app .home-watch-card.is-offer {
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  gap: 0; padding: 0; overflow: hidden;
  min-height: 154px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--edgeIn);
  cursor: default; transform: none;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
#app .home-watch-card.is-offer:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
}
#app .hw-open {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: 6px; column-gap: 10px; align-items: center;
  padding: 16px 18px 10px; background: none; border: 0;
  color: inherit; font: inherit; text-align: start; cursor: pointer;
  min-width: 0; flex: 1;
}
#app .hw-open:hover .hw-name { color: var(--accent); text-decoration: none; }
#app .hw-open .hw-code {
  grid-column: 1; grid-row: 1;
  font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  letter-spacing: .06em; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; width: fit-content;
  padding: 3px 9px; border-radius: 6px;
  background: var(--sunk); border: 1px solid var(--rule);
}
#app .hw-open .hw-pct {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: rgba(18, 107, 117, 0.08);
}
#app .hw-open .hw-name {
  grid-column: 1 / -1; grid-row: 2;
  font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--t2);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .hw-open .hw-close {
  grid-column: 1 / -1; grid-row: 3;
  font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.2;
  margin-top: 4px;
}
#app .hw-follow {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; margin: 0 16px 14px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--sunk);
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all .16s ease;
}
#app .hw-follow:hover {
  background: var(--accent); color: var(--surface); border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 107, 117, 0.25);
}
#app .hw-follow[aria-pressed="true"] {
  background: var(--accTint); color: var(--accent); border-color: var(--accent);
}

/* Abnormal Volume List directly under abnormal volume graph */
#app .ct-volume-block { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#app .ct-abnormal-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule);
}
#app .ct-abnormal-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--edgeIn);
  color: inherit; font: inherit; cursor: pointer; text-align: start;
  transition: all .15s cubic-bezier(.2,.7,.3,1); width: 100%;
}
#app .ct-abnormal-row:hover {
  background: var(--sunk); border-color: var(--accent); transform: translateY(-1px);
}
#app .ct-abnormal-co {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
#app .ct-abnormal-code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; color: var(--ink);
}
#app .ct-abnormal-name {
  font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .ct-abnormal-bar-wrap {
  flex: 0 0 76px; display: flex; flex-direction: column; gap: 2px;
}
#app .ct-abnormal-bar {
  height: 6px; border-radius: 3px; background: rgba(27,25,23,.08); overflow: hidden; display: block;
}
#app .ct-abnormal-bar i {
  display: block; height: 100%; background: var(--iris); border-radius: 3px;
}
#app .ct-abnormal-bar-lbl {
  font-size: 11px; color: var(--faint); font-family: 'IBM Plex Sans Arabic', sans-serif;
}
#app .ct-abnormal-mult {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: var(--iris);
}
#app .ct-abnormal-pct {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  width: 52px; text-align: end;
}
#app .ct-abnormal-pct.up { color: var(--up); }
#app .ct-abnormal-pct.down { color: var(--down); }
#app .ct-abnormal-arrow { font-size: 12px; color: var(--faint); flex: none; }

/* The band for shares nobody dealt in.
 * Hatched rather than a fourth colour: three solid bands are three kinds of
 * move, and this is the absence of one. The same hatch the sector table uses
 * for its did-not-trade share, so the mark means one thing across the site. */
#app .breadth-bar > i.is-idle,
#app .breadth-key > i.is-idle {
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 3px, var(--rule) 3px 4px);
  border: 1px solid var(--rule);
}

/* Explore further: one shelf holding what used to be four sections.
 * No card of its own — a bordered island around four bordered islands is the
 * nested-card pattern this design keeps out. A rule and a heading are enough
 * to say "everything under here is optional". */
#app .explore-further {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
#app .ef-head { display: flex; flex-direction: column; gap: 6px; }
#app .ef-head h2 { margin: 0; font: 600 21px/1.35 var(--font-heading); letter-spacing: -.02em; }
#app .ef-head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--t2); max-width: 68ch; }
/* The members already carry their own margins from when they were siblings. */
#app .explore-further > .market-measures { margin-top: 0 !important; }

/* The new-event marker on a followed company.
 * It names the document and its date, because a bare dot would be the
 * "generic attention badge" the review rules out — a reader cannot tell a
 * dividend from a rights issue from a coloured spot, and a mark that could
 * mean anything is read as "look at this", which is advice. */
#app .hw-mark {
  grid-column: 1 / -1; grid-row: 5; display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edgeIn);
  font-size: 12px; line-height: 1.45; color: var(--t2);
}
#app .hw-mark > i {
  flex: 0 0 6px; height: 6px; border-radius: 999px; background: var(--accent);
}

/* The evidence cards size to what they hold.
 * Grid items stretch by default, so two cards in a row took the height of the
 * taller and the shorter one ended in dead space under its own limit line —
 * a card with a picture 104px tall stretched to 476px. The ownership card is
 * now three share bars and is legitimately the tallest of the three; that is
 * a reason for the others to stop growing, not to grow with it. */
/* THE ROW WITH THREE DIFFERENT BOTTOMS.
 *
 * `align-items: start` was the first answer to one card standing twice as tall
 * as the others: let each card be its own height. It stopped the two short
 * cards stretching, and left the row with three ragged bottom edges — which is
 * the other way a row of cards looks broken. The cause was never the alignment
 * anyway; it was one card's rows running to six lines, fixed above.
 *
 * With the rows held, the natural heights are close enough that stretching is
 * right again: three cards in one row are one composed object and should
 * share a bottom edge. The slack goes where it belongs — between the reading
 * and the footer — by anchoring the footer rule to the bottom, so the title,
 * the drawing and the limit stay at the top where the eye starts, and the
 * source line sits at the foot of every card at the same height. */
#app .ct-grid { align-items: stretch; }
#app .ct-card > .ct-rule:has(+ .ct-foot) { margin-top: auto; }

/* The watchlist offer on a phone: one company to a row, each with the room
 * its name and its follow button need. (The index cards that shared this
 * block became the brief's strip on 25 September 2026.) */
@media (max-width: 600px) {
  #app .home-watch { padding: 18px 16px; }
  #app .home-watch-grid { grid-template-columns: 1fr; gap: 12px; }
  #app .home-watch-card,
  #app .home-watch-card.is-offer {
    min-height: 148px;
    padding: 16px 16px 12px;
  }
  #app .hw-open { padding: 14px 16px 8px; }
  #app .hw-open .hw-close,
  #app .home-watch-card .hw-close { font-size: 21px; }
  #app .hw-follow { min-height: 38px; margin: 0 14px 14px; font-size: 12px; }
  #app .home-watch-title { font-size: 17px; margin-bottom: 12px; }
  #app .breadth-strip { padding: 16px 14px; }
  #app .breadth-head h2 { font-size: 14px; }
  #app .ct-card { padding: 18px 16px; }
  #app .ct-abnormal-row { padding: 9px 10px; min-height: 44px; }
  #app .ct-abnormal-bar-wrap { flex: 0 0 56px; }
  #app .insight-card { padding: 18px 16px !important; }
}

/* ── The crossing card: a timeline, and the documents under it ────────────
 *
 * Added 20 September 2026 as the shelf's fourth builder. The index card only
 * fires on a crossing — nine times in 170 sessions on the published history —
 * so the third slot spent nineteen days in twenty showing "no further
 * verified changes", which is a sentence about a quiet day printed on an
 * ordinary one. See the note on `crossingCard` in changed-today.js.
 *
 * The list under the drawing is the drawing's own key: every dot on the
 * timeline is a row here, newest first, so a reader can go from a mark to the
 * document it stands for without a legend.
 * ──────────────────────────────────────────────────────────────────────── */
#app .ct-cross-block { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#app .ct-cross-why {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); text-wrap: pretty;
}
#app .ct-cross-list {
  list-style: none; margin: 0; padding: 10px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 7px;
}
#app .ct-cross-item {
  display: flex; align-items: baseline; gap: 9px; min-width: 0;
  padding-inline-start: 13px; position: relative;
}
/* Filled for a filing, outlined for a story — the same two marks the timeline
   above uses, so the row and the dot are visibly the same object. A filing is
   the company's own statement; a story is somebody writing about it. */
#app .ct-cross-item::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 6px;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
}
#app .ct-cross-item.is-filing::before { background: var(--accent); }
#app .ct-cross-item.is-news::before {
  background: transparent; border: 1.5px solid var(--iris, var(--accent));
}
#app .ct-cross-when {
  flex: 0 0 auto; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; color: var(--faint); white-space: nowrap;
}
#app .ct-cross-title {
  flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--t2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── More companies on each card, and the way to all of them ──────────────
 *
 * The owner, 22 September 2026: the cards "need to get a little bit bigger to
 * show more companies", a company should open when it is pressed, and each
 * card needs a way to "the full page that shows companies per section and
 * more data". The busiest list goes from four names to eight, the ownership
 * card from three bars to five, the crossing card names the week's other
 * companies under the one it is about, and every card ends on a full list.
 * ──────────────────────────────────────────────────────────────────────── */
#app .ct-shelf-all {
  margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; padding: 4px 0;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent);
}
#app .ct-shelf-all:hover { color: var(--ink); text-decoration: underline; }
#app .ct-abnormal-list { gap: 6px; }
#app .ct-abnormal-row { padding: 6px 10px; }
/* A title that is a company's name is the first thing a reader presses. */
#app .ct-title-go {
  border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: start; line-height: inherit;
}
#app .ct-title-go:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#app a.ct-cross-title { color: var(--t2); text-decoration: none; }
#app a.ct-cross-title:hover { color: var(--accent); text-decoration: underline; }
#app .ct-also { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
#app .ct-also-head {
  margin: 0 0 2px; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; letter-spacing: .06em; color: var(--faint);
}
#app .ct-also-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; min-height: 34px;
  padding: 6px 8px; border: 1px solid var(--edgeIn); border-radius: 9px; background: var(--surface);
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
#app .ct-also-row:hover { background: var(--sunk); border-color: var(--accent); }
#app .ct-also-code { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; }
#app .ct-also-name {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .ct-also-count {
  flex: none; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px; color: var(--faint);
}
#app .ct-also-arrow { flex: none; font-size: 11px; color: var(--faint); }
#app .ct-more.ct-full { font-size: 14px; }

/* ── ما تغيّر اليوم، كاملاً — the shelf at full length ────────────────────
 *
 * One section per card, in the card's own words: heading and count, how it is
 * measured, every company as a row that opens it, the card's limit line, the
 * source, and the screen that goes further. See changes-page.js for why this
 * is a page of its own rather than three links to other screens.
 * ──────────────────────────────────────────────────────────────────────── */
#app .cf-screen { display: flex; flex-direction: column; gap: 18px; }
#app .cf-head { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 0; }
#app .cf-back {
  align-self: flex-start; border: 1px solid var(--rule); background: var(--surface); border-radius: 999px;
  padding: 6px 14px; min-height: 36px; font: inherit; font-size: 14px; color: var(--t2); cursor: pointer;
}
#app .cf-back:hover { color: var(--ink); border-color: var(--accent); }
#app .cf-dateline {
  margin: 4px 0 0; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 12px; color: var(--faint);
}
#app .cf-title {
  margin: 0; font-family: var(--font-heading); font-size: 26px; font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em; text-wrap: balance;
}
#app .cf-lede { margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.6; color: var(--t2); text-wrap: pretty; }
#app .cf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#app .cf-jump-item {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
#app .cf-jump-item b { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); }
#app .cf-jump-item:hover { border-color: var(--accent); }

#app .cf-section {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; scroll-margin-top: 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-island);
}
#app .cf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#app .cf-section-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
#app .cf-count {
  flex: none; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 12px; color: var(--t2);
  background: var(--sunk); border-radius: 999px; padding: 3px 10px;
}
#app .cf-how { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.6; color: var(--t2); }
#app .cf-empty { margin: 0; font-size: 14px; color: var(--faint); }
#app .cf-limit {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 14px; line-height: 1.55; color: var(--t2);
}
#app .cf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#app .cf-deeper {
  border: 0; background: transparent; padding: 4px 0; min-height: 36px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent);
}
#app .cf-deeper:hover { color: var(--ink); text-decoration: underline; }
#app .cf-code { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: var(--ink); }
#app .cf-name { min-width: 0; font-size: 14px; color: var(--ink); }
#app .cf-arrow { flex: none; margin-inline-start: auto; font-size: 12px; color: var(--faint); }

/* Unusual volume: one row per company, eight columns on a wide screen. */
#app .cf-vol { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; }
#app .cf-vol-row {
  display: grid; align-items: center; gap: 12px; width: 100%; min-width: 760px;
  grid-template-columns: 28px minmax(170px, 2.2fr) minmax(120px, 1.3fr) repeat(3, minmax(70px, .9fr)) minmax(84px, 1fr) minmax(110px, 1.1fr);
  padding: 8px 10px; border: 1px solid var(--edgeIn); border-radius: 10px; background: var(--surface);
  font: inherit; color: inherit; text-align: start;
}
#app button.cf-vol-row { cursor: pointer; }
#app button.cf-vol-row:hover { background: var(--sunk); border-color: var(--accent); }
#app .cf-vol-headrow {
  border-color: transparent; background: transparent; padding-block: 2px;
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px; color: var(--faint);
}
#app .cf-rank { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint); }
#app .cf-co { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#app .cf-co .cf-name { font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .cf-sector { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .cf-mult { display: flex; align-items: center; gap: 8px; min-width: 0; }
#app .cf-mult b { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--iris); }
#app .cf-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
#app .cf-bar i { display: block; height: 100%; background: var(--iris); border-radius: 3px; }
#app .cf-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
#app .cf-move.up { color: var(--up); }
#app .cf-move.down { color: var(--down); }

/* The indices: where each one sits against its own average. */
#app .cf-idx { display: flex; flex-direction: column; gap: 6px; }
#app .cf-idx-row {
  display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--edgeIn); border-radius: 10px;
}
#app .cf-idx-row.is-crossed { border-color: var(--accent); background: var(--accTint); }
#app .cf-idx-name { font-size: 14px; }
#app .cf-idx-last { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; }
#app .cf-idx-mean, #app .cf-idx-side { font-size: 14px; color: var(--t2); }
#app .cf-idx-side.up bdi { color: var(--up); }
#app .cf-idx-side.down bdi { color: var(--down); }
#app .cf-idx-cross {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px; color: var(--accent);
}

/* Stakes filed: each company, its bar, and every holder by name. */
#app .cf-own { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
#app .cf-own-item, #app .cf-cross-item {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--edgeIn); border-radius: 12px; background: var(--surface);
}
#app .cf-own-co, #app .cf-cross-co {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; width: 100%; padding: 0;
  border: 0; background: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer;
}
#app .cf-own-co:hover .cf-name, #app .cf-cross-co:hover .cf-name { color: var(--accent); text-decoration: underline; }
#app .cf-own-known, #app .cf-cross-count {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 12px; color: var(--t2);
}
#app .cf-holders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#app .cf-holders li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12px; }
#app .cf-holder { flex: 1 1 auto; min-width: 0; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .cf-holders b { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
#app .cf-holders small { flex: none; font-size: 11px; color: var(--faint); }

/* Filings and the press: each company, why it is here, every document. */
#app .cf-cross { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
#app .cf-why { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
#app .cf-docs { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
#app .cf-doc { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding-inline-start: 13px; position: relative; }
#app .cf-doc::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 6px; inline-size: 7px; block-size: 7px; border-radius: 50%;
}
#app .cf-doc.is-filing::before { background: var(--accent); }
#app .cf-doc.is-news::before { background: transparent; border: 1.5px solid var(--iris); }
#app .cf-doc-when, #app .cf-doc-kind {
  flex: none; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px; color: var(--faint); white-space: nowrap;
}
#app .cf-doc-title { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--t2); }
#app a.cf-doc-title { text-decoration: none; }
#app a.cf-doc-title:hover { color: var(--accent); text-decoration: underline; }

/* On a phone the volume table becomes two lines a row: who and how far above
   its usual first, the other figures under it, each with its own label. */
@media (max-width: 720px) {
  #app .cf-section { padding: 16px 14px; }
  #app .cf-title { font-size: 21px; }
  #app .cf-vol { overflow-x: visible; }
  #app .cf-vol-row.cf-vol-headrow { display: none; }
  /* Flex, not grid: the first line is rank, company and multiple — the
     company's basis leaves no room for a fourth item, so the figures always
     start a line of their own and flow along it. */
  #app .cf-vol-row { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; gap: 3px 12px; }
  #app .cf-vol-c0 { flex: 0 0 18px; }
  #app .cf-vol-c1 { flex: 1 1 calc(100% - 110px); min-width: 0; }
  #app .cf-vol-c2 { flex: 0 0 auto; }
  #app .cf-vol-c2 .cf-bar { display: none; }
  #app .cf-vol-row > .cf-num { flex: 0 0 auto; font-size: 12px; color: var(--t2); }
  #app .cf-vol-row > .cf-vol-c3 { margin-inline-start: 30px; }
  #app .cf-vol-row > .cf-num[data-label]::before { content: attr(data-label) ' '; color: var(--faint); font-family: 'IBM Plex Sans Arabic', sans-serif; }
  #app .cf-own, #app .cf-cross { grid-template-columns: minmax(0, 1fr); }
}

/* The holders under each ownership bar, as its key: the bar's own legend is
   hidden here because at a card's width it ran the last name into the
   "not disclosed" band beside it. Same four tints, in the bar's order. */
#app .ct-own-row .pv-share-keys, #app .cf-own-item .pv-share-keys { display: none; }
#app .ct-holders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#app .ct-holders li { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: 12px; }
#app .ct-sw { flex: none; inline-size: 9px; block-size: 9px; border-radius: 2px; align-self: center; }
#app .ct-sw.is-0 { background: var(--accent); }
#app .ct-sw.is-1 { background: var(--iris); }
#app .ct-sw.is-2 { background: var(--accMid); }
#app .ct-sw.is-3 { background: var(--irisMid); }
#app .ct-holder { flex: 1 1 auto; min-width: 0; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .ct-holders b { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); }
#app .ct-holders small { flex: none; font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 11px; color: var(--faint); }

/* The busiest list, one line a company, so eight fit where four did: the
   ticker and the name share the line, and "vs normal" is said once by the
   bars above rather than under every row. */
#app .ct-abnormal-co { flex-direction: row; align-items: baseline; gap: 7px; }
#app .ct-abnormal-bar-lbl { display: none; }
#app .ct-abnormal-row { min-height: 36px; }
/* On the full page a holder's name has the room to wrap, and its filing date
   is written out, so the name takes a second line rather than an ellipsis. */
#app .cf-own-item .ct-holders li { flex-wrap: wrap; }
#app .cf-own-item .ct-holder { white-space: normal; flex-basis: 60%; }