/* Dashboard mode (src/site/dashboard.ts): the board on one desktop screen. Loaded after /assets/site.css and uses only its colour tokens.
   Design: /mnt/project-files/brief-product/dashboard-mode.html (v15, Ele, 8 Nov 2026). The full board from 900px (an iPad on its side), a narrower
   arrangement from 700px (an iPad upright); under 700px dashboard.js sends the reader to the feed, so the one-column rules are only a fallback. */
html, body { background: var(--surface); }
.d-page { max-width: 1440px; margin: 0 auto; padding: 0 20px 28px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.d-top { display: flex; align-items: center; gap: 12px; padding: 14px 4px 12px; }
.d-tl { display: flex; align-items: center; gap: 12px; }
.d-brand { display: block; text-decoration: none; }
.d-brand .wm { height: 20px; }
.d-top .burger { order: -1; }

.d-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.d-tile { background: var(--bg); border-radius: 10px; padding: 14px 16px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.d-h { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); line-height: 1.5; }
.d-h small, .d-h time { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.d-h small a { color: var(--text-muted); }

/* the brief */
.d-brief { grid-column: span 4; }
.d-bt { display: flex; align-items: center; gap: 10px; margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 700; }
.d-bh { display: flex; align-items: center; gap: 10px; }
.d-upd { margin-left: auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.d-bt .d-writing:not([hidden]) + .d-upd { margin-left: 12px; }
.d-paras { display: grid; gap: .8em; }
.d-paras p, .d-sum p, .d-rt { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; line-height: 1.6; color: var(--text); }
/* a story link: solid underline in the accent, so it reads as a link next to a name's grey dots (hover card) (Ele, 8 Nov) */
.d-paras a, .d-sum a { color: var(--text); text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--dot) 55%, transparent); transition: text-decoration-color .15s; }
.d-paras a:hover, .d-sum a:hover { text-decoration-color: var(--dot); }
.d-none { color: var(--text-muted); }
.d-latest { display: grid; gap: 4px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); }

/* lists: the latest stories and each Ongoing story's posts */
.d-list { list-style: none; margin: 0; padding: 0; display: grid; }
.d-list a { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 5px 0; font-size: 14px; text-decoration: none; color: var(--text); }
.d-list time { font-size: 12px; color: var(--text-muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.d-list span { font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.45; }
.d-list b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 11.5px; font-weight: 600; margin-right: 4px; }
.d-list a:hover span { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.d-latest .d-list li + li { border-top: 1px solid var(--rule); }
/* the latest stories: time, section and headline in three columns shared by every row, so the headlines line up (Ele, 8 Nov) */
.d-lat { grid-template-columns: 58px max-content minmax(0, 1fr); column-gap: 10px; }
.d-lat li, .d-lat a { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.d-lat li, .d-lat a { column-gap: 10px; row-gap: 0; }
.d-lat b { margin: 0; padding-top: 2px; }

/* money */
.d-money { grid-column: span 2; gap: 12px; }
.d-mhead { display: flex; justify-content: space-between; align-items: center; }
.d-mgrid { display: grid; gap: 12px; }
.d-mgrid section { display: grid; gap: 6px; min-width: 0; }
.d-mgrid section + section { padding-top: 12px; border-top: 1px solid var(--rule); }
.d-mkt { display: grid; grid-template-columns: minmax(0, 1fr) auto 50px 50px; gap: 3px 10px; font-size: 11px; font-variant-numeric: tabular-nums; align-items: baseline; }
.d-mkt .n { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-mkt .v { text-align: right; font-weight: 600; color: var(--text); }
.d-mkt .c { text-align: right; }
.good { color: var(--up); } .bad { color: var(--down); } .flat { color: var(--text-muted); }
.d-fl { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.d-fl svg { display: block; width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 25%, transparent); }
/* Day and Month side by side (Ele, 8 Nov): the two labels sit over the two change columns */
.d-mcols { display: grid; grid-template-columns: 50px 50px; column-gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); text-align: right; }

/* Ongoing: equal tiles whose post lists line up across the row (subgrid) */
.d-ongoing { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 12px; }
.d-ongoing.d-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-ongoing.d-n1 { grid-template-columns: minmax(0, 1fr); }
.d-story { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
.d-story h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; line-height: 1.3; }
.d-story h3 .temp { margin-left: auto; }
.d-story h3 .d-writing { margin-left: auto; }
.d-story h3 .d-writing:not([hidden]) + .temp { margin-left: 8px; }
.d-st { color: var(--thread); text-decoration: none; }
.d-st:hover { text-decoration: underline; }
.d-sum { display: grid; gap: 8px; align-content: start; }
.d-sum p { line-height: 1.55; }
.d-posts { padding-top: 6px; border-top: 1px solid var(--rule); align-content: start; }

/* Travel and Analysis */
.d-feature { grid-column: span 3; }
.d-fbody { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: start; }
.d-fbody.d-nopic { grid-template-columns: minmax(0, 1fr); }
.d-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.d-kpi { display: grid; gap: 2px; padding: 10px; border-radius: 6px; background: var(--surface); }
.d-kpi b { font-size: 28px; line-height: 1.1; color: var(--up); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.d-kpi span { font-size: 12px; color: var(--text-muted); }
.d-ftext { display: grid; gap: 6px; min-width: 0; }
.d-ftext h3 { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 17px; line-height: 1.3; }
.d-ftext p { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14.5px; line-height: 1.55; }
.d-ftext a { justify-self: start; font-size: 13px; color: var(--text); }

/* weather */
.d-weather { grid-column: 1 / -1; gap: 8px; }
.d-wxrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.d-wc { display: grid; gap: 4px; min-width: 0; align-content: start; color: var(--text); text-decoration: none; }
.d-wc + .d-wc { border-left: 1px solid var(--rule); padding-left: 14px; }
.d-wl { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 13.5px; }
.d-wl b { font-weight: 600; }
.d-wl .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.d-wl .t span { font-weight: 400; color: var(--text-muted); }
.d-sky { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cat-weather); }
.d-wi svg { display: block; width: 22px; height: 22px; }
.d-wi .sun { fill: var(--cat-finance); } .d-wi .ray line { stroke: var(--cat-finance); stroke-width: 3.5; stroke-linecap: round; }
.d-wi .cloud { fill: var(--text-muted); } .d-wi .cloud2 { fill: color-mix(in srgb, var(--text-muted) 55%, var(--bg)); }
.d-wi .drop line { stroke: var(--cat-weather); stroke-width: 3; stroke-linecap: round; }
.d-uv { font-size: 12px; color: var(--text-muted); }
.d-items { display: flex; flex-wrap: wrap; gap: 4px; }
.d-items span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 6px 1px 3px; border-radius: 5px; background: var(--surface); }
.d-items .gi { width: 15px; height: 15px; }

/* writing: the pulse while a part is retyped, the caret, a new post sliding in */
.d-writing { display: inline-flex; align-items: center; gap: 6px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 500; color: var(--dot); margin-left: auto; }
.d-writing[hidden] { display: none; }
.d-writing i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); animation: d-pulse 1s ease-in-out infinite; }
.d-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--dot); margin-left: 1px; vertical-align: -2px; animation: d-blink .9s steps(1) infinite; }
.d-list li.d-in { border-radius: 4px; animation: d-slide .5s ease-out, d-glow 6s ease-out; }
@keyframes d-pulse { 50% { opacity: .25; transform: scale(.7); } }
@keyframes d-blink { 50% { opacity: 0; } }
@keyframes d-glow { 0%, 60% { background: color-mix(in srgb, var(--dot) 14%, transparent); } 100% { background: transparent; } }
@keyframes d-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .d-writing i, .d-typing::after, .d-list li.d-in { animation: none; } }

/* a story opened in the box it was clicked in: the whole post, at the site's reading sizes (headline 18px, text 15px), scrolling inside the box when long */
.d-rwrap { grid-row: 1 / -1; grid-column: 1 / -1; display: grid; gap: 10px; align-content: start; min-width: 0; }
.d-back { justify-self: start; font-size: 13px; color: var(--text-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.d-back:hover { color: var(--text); }
.d-rh { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; line-height: 1.2; font-weight: 700; }
.d-tile.d-reading { grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; }
.d-tile.d-reading .d-rwrap { grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
.d-rbody { display: grid; gap: .8em; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-gutter: stable; }
.d-rbody p { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; line-height: 1.6; color: var(--text); max-width: 70ch; }
/* while the story is fetched: the accent pulse and three shimmering lines, so the box answers the click at once */
.d-reading-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--dot); }
.d-reading-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); animation: d-pulse 1s ease-in-out infinite; }
.d-sk { display: grid; gap: 9px; }
.d-sk span { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--dot) 12%, var(--surface)) 50%, var(--surface) 100%); background-size: 200% 100%; animation: d-shimmer 1.2s linear infinite; }
.d-sk span:nth-child(2) { width: 92%; } .d-sk span:nth-child(3) { width: 64%; }
@keyframes d-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .d-sk span, .d-reading-dot i { animation: none; } }

@media (max-width: 1099px) {
  .d-page { padding: 0 14px 22px; }
  .d-board { gap: 10px; }
  .d-tile { padding: 12px 14px; }
  .d-fbody { grid-template-columns: 110px minmax(0, 1fr); }
}
/* an iPad upright (700 to 899px): the brief across the top, Money and the Ongoing stories side by side under it, then two tiles a row */
@media (max-width: 899px) {
  .d-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-brief, .d-feature, .d-ongoing { grid-column: 1 / -1; }
  .d-money { grid-column: 1 / -1; }
  .d-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .d-mgrid section + section { padding-top: 0; border-top: 0; }
  .d-mgrid section:nth-child(n + 3) { padding-top: 12px; border-top: 1px solid var(--rule); }
  .d-ongoing, .d-ongoing.d-n3, .d-ongoing.d-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .d-story { grid-row: auto; grid-template-rows: none; }
  .d-ongoing.d-n3 .d-story:first-child { grid-column: 1 / -1; }
  .d-wxrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-wc:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 699px) {
  .d-page { padding: 0 12px 20px; }
  .d-board { grid-template-columns: minmax(0, 1fr); }
  .d-fbody { grid-template-columns: minmax(0, 1fr); }
  .d-wxrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .d-wc + .d-wc { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 10px; }
}