/* 13 October: source-audited narrow screens, short screens and touch controls. */
/* Consent must remain scrollable if text zoom or a short viewport makes it tall. */
:root body .analytics-consent {
  --consent-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  bottom: var(--consent-bottom);
  max-height: calc(100dvh - var(--consent-bottom) - max(16px, env(safe-area-inset-top, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
}
:root body .analytics-consent .btn { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  :root body .analytics-consent { --consent-bottom: calc(var(--mobile-dock-height, 70px) + 12px); }

  /* New planners and search fields do not all use the older .field wrapper. */
  :root body:has(main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):focus, main textarea:focus, main select:focus) :is(.mobile-contact, .chat-launcher) {
    visibility: hidden;
  }
  :root body .chat-header button,
  :root body .chat-prompts button { min-width: 44px; min-height: 44px; }
  :root body .chat-handoff { flex-wrap: wrap; gap: 4px 12px; }
  :root body .chat-handoff a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Keep the close control and composer reachable above the phone keyboard. */
  :root body .chat-panel[data-keyboard-open=true] { overflow-y: auto; }
  :root body .chat-panel[data-keyboard-open=true] .chat-log { flex: 1 0 120px; }
  :root body .chat-panel[data-keyboard-open=true] .chat-header { position: sticky; top: 0; z-index: 1; }

  /* Variable header height also applies to the newer section jump links. */
  main :is(.value-section, .pg-panel, .consultancy-enquiry) {
    scroll-margin-top: calc(var(--header-height, 134px) + 20px);
  }
  .pg-rail a { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  /* Four intrinsic-width columns can outgrow the game at 320px. */
  :root body .rr .rr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body .rr .rr-stat { min-width: 0; }
  :root body .rr .rr-stat small { overflow-wrap: anywhere; }
  :root body .rr .rr-right { min-width: 0; flex-wrap: wrap; }
  :root body .rr .rr-right > button { flex-shrink: 0; }
  :root body .rr .rr-lives { flex-shrink: 0; }
}

@media (max-width: 760px) and (max-height: 600px) {
  :root body .chat-panel { overflow-y: auto; }
  :root body .chat-log { flex: 1 0 120px; }
  :root body .chat-header { position: sticky; top: 0; z-index: 1; }
}
@media (max-height: 380px) {
  /* The choice panel may cover the dock; its own actions take precedence. */
  :root body .analytics-consent { --consent-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
}
@media print {
  :root body .analytics-consent { display: none !important; }
}

/* Ask Jack: the same navy, blue, gold and silver palette as the main pages. */
:root body .chat-panel {
  background: linear-gradient(155deg, var(--card), var(--surface));
  box-shadow: 0 24px 70px #07162938, 0 0 0 1px #b99a6040;
}
:root body .chat-header {
  background: linear-gradient(125deg, #0b1c34, #1c3f60);
  border-bottom-color: #bda16e;
}
:root body .chat-header .chat-agent > div > span { margin-top: 3px; }
:root body .chat-header-actions { flex-shrink: 0; }
:root body .chat-header button { min-width: 44px; min-height: 44px; }
:root body .chat-header button:hover { background: #ffffff14; }
:root body .chat-log { scrollbar-gutter: stable; }
:root body .chat-message a { box-shadow: 0 2px 8px #07162905; }
:root body .chat-prompts { scrollbar-width: thin; scroll-padding-inline: 16px; }
:root body .chat-prompts::-webkit-scrollbar { display: block; height: 4px; }
:root body .chat-prompts::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
:root body .chat-prompts button { min-height: 44px; }
:root body .chat-prompts button:disabled { opacity: .6; cursor: wait; }
:root body .chat-handoff a { min-height: 44px; display: inline-flex; align-items: center; }
:root body .chat-handoff { flex-wrap: wrap; gap: 4px 12px; }
:root body .chat-privacy { max-width: none; }
:root body .chat-form textarea::placeholder { color: var(--muted); opacity: 1; }
[data-theme=dark] body .chat-panel { box-shadow: 0 24px 70px #0008, 0 0 0 1px #b99a6040; }
@media(max-width:760px) {
  body.chat-mobile-open { overflow: hidden; }
  :root body .chat-panel { max-width: none; }
  :root body .chat-message.you { margin-left: 18px; }
  :root body .chat-form textarea { font-size: 1rem; }
}
@media(prefers-reduced-motion:reduce) {
  :root body .chat-launcher, :root body .chat-message a { transition: none; }
}

/* Readable editorial copy without changing the typography inside tools or cards. */
:root { --reading-copy-size:1.0625rem; }
:root body main :is(.article,.learning-prose,.gcc-prose) > :is(p,blockquote):not(:where(.small,.source-note,.planning-label,.planning-editorial,.profile-parent-link)),
:root body main :is(.article,.learning-prose,.gcc-prose) > :is(section,.scenario,.country-depth) > :is(p,blockquote):not(:where(.small,.source-note,.planning-label,.planning-editorial)),
:root body main .scenario > .case-depth > p:not(:where(.small,.source-note)) {
  font-size:var(--reading-copy-size);
  line-height:1.8;
  max-width:68ch;
}
:root body main :is(.article,.learning-prose,.gcc-prose) > :is(ul,ol) > li,
:root body main :is(.article,.learning-prose,.gcc-prose) > :is(section,.scenario,.country-depth) > :is(ul,ol) > li,
:root body main .scenario > .case-depth > :is(ul,ol) > li {
  font-size:var(--reading-copy-size);
  line-height:1.8;
}
/* Guide paragraphs live inside chapters, so a direct-child prose rule misses them. */
:root body main .learning-prose > section > :is(p,ul,ol,blockquote) { max-width:68ch; }

/* The illustrative case label is useful context, not decorative microtype. */
:root body main .casebook-card .casebook-label {
  font-size:.875rem!important;
  line-height:1.55;
  letter-spacing:.07em;
}

@media(max-width:760px) {
  :root { --reading-copy-size:1rem; }
  /* Rate dates and source status remain legible and can wrap beside refresh. */
  :root body .market-bar-label { font-size:.8125rem;line-height:1.5; }
  :root body .market-bar a { font-size:.9375rem;line-height:1.5;min-width:0;white-space:normal; }
  :root body .market-bar :is(time,[data-market-status],.market-bar-note) { font-size:.875rem;line-height:1.55; }
  :root body .market-live { min-width:0;max-width:100%;white-space:normal; }
  :root body .market-live [data-market-status] { min-width:0;overflow-wrap:break-word; }
  :root body .market-live button { flex-shrink:0; }
}