/* Phone Blog tab (static/phone-blog.js), in Brodie's Blog's own look: the edition's paper,
   white card, teal type and Arial, and its dark palette when the phone is in dark mode
   (blog.aemarkets.com.au does the same). The tab only exists in the phone and tablet nav
   (900px and below); on a tablet the column stays phone-width and centred. */
body[data-mobile-tab="blog"] {
  --pb-page: #F1F4F4;
  --pb-card: #FFFFFF;
  --pb-ink: #144147;
  --pb-body: #1B2A2C;
  --pb-muted: #5A7A7E;
  --pb-rule: #DEE4E5;
  --pb-border: #DDE3E4;
  --pb-button: #144147;
  --pb-button-ink: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  body[data-mobile-tab="blog"] {
    --pb-page: #0E2F33;
    --pb-card: #1C353A;
    --pb-ink: #F1F4F4;
    --pb-body: #F1F4F4;
    --pb-muted: #8EA4A7;
    --pb-rule: #2A4A4F;
    --pb-border: #2A4A4F;
    --pb-button: #B8C6C8;
    --pb-button-ink: #0E2F33;
  }
}
/* The page behind the edition is the blog's paper, edge to edge. */
body[data-mobile-tab="blog"] .dashboard { background: var(--pb-page); }
/* Like the other phone sections, the help bubble gives way to the content here. */
body[data-mobile-tab="blog"] .contact-desk-fab { display: none; }

.pb { max-width: 600px; margin: 0 auto 8px; color: var(--pb-body); font-family: Arial, Helvetica, sans-serif; }
.pb-empty { margin: 32px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 15px; color: var(--pb-muted); text-align: center; }
.pb-empty p { margin: 0; }
.pb-secondary { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--pb-border); background: var(--pb-card); color: var(--pb-ink); font: 700 15px/1 Arial, Helvetica, sans-serif; cursor: pointer; }
.pb-text-link { color: var(--pb-ink); font-size: 14px; }

/* The edition's masthead: a white card with the teal top rule, logo, spaced title and date. */
.pb-mast { display: flex; flex-direction: column; align-items: center; margin-top: 4px; padding: 26px 20px 22px; border-top: 3px solid var(--pb-ink); border-radius: 2px; background: var(--pb-card); text-align: center; box-shadow: 0 1px 2px rgba(20, 65, 71, 0.08); }
.pb-logo img { display: block; height: 30px; width: auto; }
.pb-title { margin: 16px 0 0; font: 700 18px/1.2 Arial, Helvetica, sans-serif; letter-spacing: 4px; text-transform: uppercase; color: var(--pb-ink); }
.pb-date { margin: 8px 0 0; font: 700 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 1.6px; color: var(--pb-muted); }
.pb-rule { align-self: stretch; margin: 18px 0; border: 0; border-top: 1px solid var(--pb-rule); }
.pb-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--pb-muted); }
.pb-read { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 48px; border-radius: 8px; background: var(--pb-button); color: var(--pb-button-ink); font: 700 16px/1 Arial, Helvetica, sans-serif; text-decoration: none; }

/* Section heads as the edition sets them: small, bold, spaced, teal, over a 2px rule. */
.pb-section { margin-top: 26px; }
.pb-heading { margin: 0; padding-top: 10px; border-top: 2px solid var(--pb-ink); font: 700 12px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 1.5px; color: var(--pb-ink); }

.pb-heads { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: pb; }
.pb-heads li { counter-increment: pb; border-bottom: 1px solid var(--pb-rule); }
.pb-head { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 6px; row-gap: 5px; padding: 14px 0; color: inherit; text-decoration: none; }
.pb-head::before { content: counter(pb); grid-row: 1 / span 2; padding-top: 2px; font: 700 13px/1.3 Arial, Helvetica, sans-serif; color: var(--pb-muted); }
.pb-hl { font: 700 16px/1.3 Arial, Helvetica, sans-serif; color: var(--pb-ink); }
.pb-src { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--pb-muted); }
.pb-arrow { flex: none; width: 14px; height: 14px; }

.pb-editions { list-style: none; margin: 4px 0 0; padding: 0; }
.pb-editions li { border-bottom: 1px solid var(--pb-rule); }
.pb-edition { display: flex; align-items: center; gap: 12px; padding: 14px 0; color: var(--pb-ink); text-decoration: none; }
.pb-ed-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.pb-ed-date { font: 700 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 1.6px; color: var(--pb-muted); }
.pb-ed-lead { font: 700 15px/1.3 Arial, Helvetica, sans-serif; color: var(--pb-ink); }
.pb-edition .pb-arrow { width: 18px; height: 18px; color: var(--pb-muted); }

.pb-foot { margin: 20px 0 4px; font-size: 12px; line-height: 1.5; color: var(--pb-muted); }
.pb a:focus-visible, .pb button:focus-visible { outline: 2px solid var(--pb-ink); outline-offset: 2px; }
/* iOS keeps :hover on the last tapped link, so a headline stayed underlined after a story was read. */
@media (hover: none) { .pb a:hover { text-decoration: none; } }