/* Your market and Coming up (owner, 24 Oct 2026: "rework the cards design for these two sections and try to make it modern
   and minimal"; KB 33, decided under KB 49). Coming up is one strip of date cards, each led by a calendar page; Your market
   is one row of the report's news cards with a cover on every card and each kind said once; the day's demand story under
   the cover is the same card, first and larger. Kit tokens only; light and dark through the reader's own tokens. */

/* ---------- the day's demand story: the news card, first and larger (the Brief's lead width, 440 px at most) ---------- */
.reader.one .mk-lead { display: flex; flex-direction: column; width: 100%; max-width: var(--report-editorial-lead-max, 440px); margin: 4px 0 24px; overflow: hidden; border-radius: 24px; background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); }
.reader.one .mk-lead > .nv-open { position: relative; }
.reader.one .mk-lead .nv-mast { background: var(--panel); border-bottom: 1px solid var(--line); }
.reader.one .mk-lead .nv-mast .nv-logo { width: 72px; height: 72px; }
.reader.one .mk-lead .nv-mast b { font-size: 21px; line-height: 27px; }
.reader.one .mk-lead-body { display: flex; flex-direction: column; min-width: 0; }
.reader.one .mk-lead .nv-body { padding: 16px 16px 12px; }
.reader.one .mk-lead .mk-head { margin: 10px 0 0; font-size: 24px; line-height: 31px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: pretty; }
.reader.one .mk-lead .mk-head button { display: block; width: 100%; min-height: 44px; text-align: start; font: inherit; color: inherit; }
.reader.one .mk-lead .acts2 { padding: 0 16px 16px; }
.reader.one .mk-lead .tr-see { margin: -6px 16px 6px; }
/* A kind is said once, on the cover of its first story: a white chip that reads on any photo and on the set headline. */
.reader.one :is(.mk-lead, .mk-card) .nv-open > .tl { z-index: 2; }
.reader.one :is(.mk-lead, .mk-card) .tl .kind { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: #fff; color: #111214; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(17,18,20,.18); }
.reader.one :is(.mk-lead, .mk-card) .tl .kind .ic { width: 16px; height: 16px; flex: none; }
.reader.one :is(.mk-lead, .mk-card).mk-typed .tl .kind { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- a cover on every card ---------- */
/* No photo and no logo: the headline itself is the cover, in the same 4:5 frame as a photo (owner, 26 Oct 2026: "the
   card size for news while we have the other one with images look really strange"), on the part's soft tint as the
   designed offer card (KB 33, Cards without blank pictures). No dot field; the outlet stays under the frame (KB 33 2.8). */
.reader.one .mk-card .nv-mast.mk-type, .reader.one .mk-lead .nv-mast.mk-type { aspect-ratio: var(--report-card-media-ratio, 4 / 5); min-height: 0; display: flex; flex-direction: column;
  align-items: stretch; justify-content: space-between; gap: 12px; padding: 52px 20px 18px; background: var(--s-market, var(--s-news)); border-bottom: 0; text-align: start; }
.reader.one .mk-type-head { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; font-size: var(--market-type-head, 24px); line-height: var(--market-type-leading, 30px);
  font-weight: 600; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.reader.one .mk-lead .mk-type-head { font-size: 26px; line-height: 33px; }

/* Headline news: the lead with no photo or logo (owner, 25 Oct 2026: "what is this ugly card design for changes in demand?").
   The kind pill leads, then the quiet line and the headline large across the whole card; no picture is made of words.
   Decided under KB 49 (KB 33, Your market and Coming up as cards). */
.reader.one .mk-lead.mk-lead-text { display: block; }
.reader.one .mk-lead-text .nv-body { padding: 20px 20px 12px; }
.reader.one .mk-lead-kind { margin: 0 0 14px; }
.reader.one .mk-lead-kind .tl { position: static; display: inline-flex; padding: 0; }
.reader.one .mk-lead-kind .kind { box-shadow: inset 0 0 0 1px var(--line); }   /* the typed cards' pill, on the card's own white */
.reader.one .mk-lead-text .mk-head { margin-top: 12px; font-size: 26px; line-height: 33px; }
.reader.one .mk-lead-text .acts2 { padding: 0 20px 18px; }

/* ---------- Your market: one row of news cards ---------- */
/* Source, date and the other outlets in one quiet line above the headline, where News names its outlet; it wraps as
   words do. */
.reader.one .mk-src { display: block; margin: 0; overflow-wrap: anywhere; }
.reader.one .mk-card .mk-head { text-wrap: pretty; }
.reader.one .mk-src .nv-fav { margin-inline-end: 6px; vertical-align: -3px; }
.reader.one .mk-src :is(.mk-when, .mk-also) { white-space: nowrap; }
.reader.one .mk-src b { color: var(--orchid-ink, var(--orchid)); font-weight: 600; }
.reader.one .mk-card [lang="ar"], .reader.one .mk-lead [lang="ar"], .reader.one .mk-day [lang="ar"] { font-family: var(--font-ar); }

/* ---------- Coming up: one strip of date cards ---------- */
.reader.one .mk-coming { margin: 0 0 32px; }
.reader.one .mk-coming-head { display: flex; align-items: center; gap: 8px; margin: 0 2px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.reader.one .mk-coming-head .ic { width: 20px; height: 20px; flex: none; color: var(--jade-ink, var(--jade)); }
.reader.one .one-row.mk-dates { margin-top: 10px; }
.reader.one .mk-dates .track { align-items: stretch; }
.reader.one .mk-day { position: relative; flex: none; display: grid; grid-template-columns: var(--market-date-page, 56px) minmax(0, 1fr); gap: 14px; align-items: start; width: 84%; max-width: 340px; min-height: 104px; padding: 16px; scroll-snap-align: start; border-radius: 24px; background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); text-align: start; }
.reader.one .mk-day:focus-visible, .reader.one .mk-card .nv-open:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
/* The calendar page: the month on a Jade band (monitoring), the day large, the weekday; an event on now, the day it ends. */
.reader.one .mk-cal { display: flex; flex-direction: column; align-items: center; width: var(--market-date-page, 56px); overflow: hidden; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.reader.one .mk-cal-m { align-self: stretch; min-height: 20px; padding: 2px 0; background: var(--jade); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.reader.one .mk-cal b { display: grid; place-items: center; min-height: 30px; margin-top: 4px; font-size: var(--market-date-day, 26px); line-height: 30px; font-weight: 600; letter-spacing: -0.02em; }
.reader.one .mk-cal b .ic { width: 22px; height: 22px; color: var(--jade-ink, var(--jade)); }
.reader.one .mk-cal small { min-height: 14px; margin-bottom: 6px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--text2); }
.reader.one .mk-day-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.reader.one .mk-day-title { font-size: 16px; line-height: 22px; font-weight: 600; text-wrap: pretty; }
.reader.one .mk-day-meta { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text2); }
.reader.one .mk-day-meta b { color: var(--jade-ink, var(--jade)); font-weight: 600; }
.reader.one .mk-day-news { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 20px; color: var(--text2); }

@media (min-width: 1024px) {
  /* The lead uses the width: its cover beside its words, the headline at the editorial lead's size. */
  .reader.one .mk-lead { display: grid; grid-template-columns: var(--report-card-width-desktop, 296px) minmax(0, 1fr); align-items: start; max-width: none; margin: 0 0 32px; }
  .reader.one .mk-lead .nv-mast { border-bottom: 0; border-inline-end: 1px solid var(--line); }
  .reader.one .mk-lead.mk-typed > .nv-open { display: flex; flex-direction: column; align-self: stretch; }
  .reader.one .mk-lead.mk-typed .mk-type { flex: 1 0 auto; }
  .reader.one .mk-lead-body { align-self: stretch; }
  .reader.one .mk-lead .nv-body { flex: 1; padding: 28px 32px 12px; }
  .reader.one .mk-lead .mk-head { font-size: var(--report-editorial-title, 30px); line-height: var(--report-editorial-leading, 38px); letter-spacing: -0.02em; }
  .reader.one .mk-lead .nv-line { -webkit-line-clamp: 4; }
  .reader.one .mk-lead .acts2 { padding: 0 32px 28px; }
  .reader.one .mk-lead .tr-see { margin: -6px 32px 8px; }
  .reader.one .mk-lead.mk-lead-text { display: block; }
  .reader.one .mk-lead-text .nv-body { padding: 28px 32px 14px; }
  .reader.one .mk-lead-text .mk-head { font-size: var(--report-editorial-title, 30px); line-height: var(--report-editorial-leading, 38px); text-wrap: balance; }
  /* Three dates share the width like the Top 3 under them. The Brief's first row is a grid on desktop (theme.css); this
     strip is not that row, so it stays a strip. */
  .reader.one .b-brief .mk-coming .one-row.mk-strip.mk-dates .track { display: flex; gap: 20px; overflow-x: auto; padding: 4px 2px 14px; margin: 0 -2px; scroll-snap-type: x mandatory; }
  .reader.one .b-brief .mk-coming .one-row.mk-strip.mk-dates .nx:not([hidden]) { display: grid; }
  .reader.one .mk-day { flex: 0 0 calc((100% - 40px) / 3); width: auto; max-width: none; }
}

/* ---------- Tellz missed something? ---------- */
.mk-missed { margin: 16px 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); color: var(--ink); overflow-wrap: anywhere; }
.mk-missed h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.mk-missed p { margin: 6px 0 12px; font-size: 14px; line-height: 20px; color: var(--text2); }
.mk-missed form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.mk-field { display: flex; flex: 1 1 200px; flex-direction: column; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; }
.mk-missed .mk-error { flex-basis: 100%; order: 3; }
.mk-field input { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--page); color: var(--ink); font: inherit; font-size: 16px; box-sizing: border-box; }
.mk-missed .mk-error { color: var(--error, var(--alert)); margin: 8px 0; }
.mk-error:empty { display: none; }
.mk-send { min-height: 44px; margin-top: 0; padding: 8px 20px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--panel); font-size: 14px; font-weight: 500; }
.mk-send:disabled { opacity: .6; cursor: wait; }
.reader.one .mk-strip + .mk-missed { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .mk-lead, .mk-day, .mk-card, .mk-send { animation: none !important; transition: none !important; transform: none !important; }
}