/* The pages of the daily. One column to be read from top to bottom: the
   headline, the numbers of the markets, the lists with the source at the end
   of each line, the view, and the way to every earlier edition. Colours, type
   and shape come from the tokens in app.css, so both themes work and this
   page reads as part of the radar. */
.daily-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.dy-top, .dy-main, .dy-foot { width: 100%; max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; min-width: 0; }

.dy-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 16px; }
.dy-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: var(--t-lead); letter-spacing: -.03em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dy-brand img { display: block; flex: none; }
.dy-nav { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.dy-nav a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; white-space: nowrap; border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); text-decoration: none; }
.dy-nav a:hover { color: var(--ink); background: var(--hover); }
.dy-nav svg { width: 13px; height: 13px; flex: none; }
.dy-nav .themebtn { margin-left: 6px; flex: none; cursor: pointer; background: transparent; }
@media (max-width: 479px) {
  .dy-x span { display: none; }
}
@media (max-width: 374px) {
  .dy-brand span { display: none; }
}
/* The sections of the site: a bar fixed to the bottom of a phone, as on the radar, and a row in the top bar of a
   wide screen. The top bar is then as wide as the one of the radar, over a column that stays narrow to be read. */
.dy-tabs { margin-right: auto; margin-left: 10px; }
@media (min-width: 1000px) {
  .dy-top { max-width: 1240px; padding-left: 28px; padding-right: 28px; }
}

.dy-main { display: grid; align-content: start; gap: clamp(36px, 6vw, 56px); padding-top: clamp(20px, 5vw, 44px); padding-bottom: clamp(48px, 8vw, 88px); }
.dy-edition, .dy-all { display: grid; gap: clamp(28px, 5vw, 40px); min-width: 0; }

.dy-open { display: grid; gap: 14px; min-width: 0; }
.dy-kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dy-kicker span:first-child { color: var(--ink); }
.dy-latest { margin-left: auto; display: inline-flex; align-items: center; min-height: 28px; letter-spacing: 0; text-transform: none; font-family: var(--face); font-size: var(--t-small); color: var(--ink); }
.dy-read { color: var(--faint); }
/* The headline wears the face of titles, in the small letters it was written in. */
.dy-lead { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; font-size: clamp(34px, 8.6vw, 60px); line-height: 1; letter-spacing: 0; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
/* The source of the headline, under it: a label, and the name that leads to the story. */
.dy-by { margin: -4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; font-family: var(--mono); font-size: var(--t-label); color: var(--dim); }
.dy-bylabel { letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dy-byline { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: 100%; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.dy-byline { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
a.dy-byline:hover, a.dy-byline:focus-visible { text-decoration-color: var(--up); }
.dy-stand { margin: 0; max-width: 62ch; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
/* The way to each part of the edition. Every one stays in sight: the row wraps, it never scrolls. */
.dy-jump { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dy-jump a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
.dy-jump a:hover, .dy-jump a:focus-visible { color: var(--ink); border-color: var(--line-3); background: var(--hover); }
.dy-jump b { font-family: var(--mono); font-weight: 500; font-size: var(--t-label); color: var(--dim); }

.dy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.dy-actions .btn { height: 42px; cursor: pointer; background: transparent; color: var(--ink); font-family: inherit; }
.dy-actions .btn.primary { background: var(--ink); color: var(--on-ink); }
.dy-actions .btn[data-state="done"] { border-color: var(--up); color: var(--up); }
.dy-actions .btn[data-state="failed"] { border-color: var(--down); color: var(--down); }
.dy-actions .btn[data-state="busy"] { color: var(--faint); pointer-events: none; }
.dy-said { flex: 1 1 100%; min-height: 0; font-size: var(--t-small); color: var(--dim); }
.dy-said:empty { display: none; }

/* The markets: one table, a line an asset and a column a measure, and under it the lines that do not fit it. */
.dy-board { display: grid; gap: 8px; min-width: 0; }
/* The tables of the radar sit in boxes that scroll sideways and are given a least width there. This one is read
   whole on a phone, so it takes the width it is given. */
.dy-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.dy-table th, .dy-table td { padding: 11px 14px; border-top: 1px solid var(--line); border-bottom: 0; text-align: right; font-size: var(--t-base); white-space: nowrap; }
.dy-table thead th { border-top: 0; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dy-table th:first-child { text-align: left; }
.dy-table tbody th { font-weight: 600; color: var(--ink); }
.dy-table td { font-weight: 600; color: var(--dim); }
.dy-table td.dy-level { color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.dy-table td.up { color: var(--up); }
.dy-table td.dn { color: var(--down); }
.dy-table td em { font-style: normal; font-weight: 400; font-size: var(--t-small); color: var(--dim); }
@media (max-width: 399px) {
  .dy-table th, .dy-table td { padding: 10px 9px; font-size: var(--t-body); }
}
.dy-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; min-width: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.dy-line .dy-tick { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.dy-line b { font-size: var(--t-base); }
.dy-rowname { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dy-tn { font-size: var(--t-small); color: var(--dim); overflow-wrap: break-word; max-width: 100%; }
.dy-tick b { font-weight: 600; color: var(--ink); overflow-wrap: break-word; max-width: 100%; }
.dy-tick i { font-style: normal; font-weight: 600; font-size: var(--t-small); color: var(--dim); }
.dy-tick i.up { color: var(--up); }
.dy-tick i.dn { color: var(--down); }
.dy-tick em { font-style: normal; font-size: var(--t-small); color: var(--dim); overflow-wrap: break-word; max-width: 100%; }
.dy-boardnote { margin: 0; padding: 0 2px; font-size: var(--t-body); line-height: 1.5; color: var(--dim); overflow-wrap: anywhere; }

/* A part of the edition: its place, its name and how much it holds, over a line that sets it apart. A link from
   the top of the page lands with the head in sight. */
.dy-board, .dy-sec, .dy-view { scroll-margin-top: 14px; }
.dy-sec, .dy-view { display: grid; gap: 14px; min-width: 0; }
.dy-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.dy-n { font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; color: var(--up); }
.dy-name { font-family: var(--display); font-weight: 800; font-stretch: 68%; font-size: var(--t-title); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.dy-count { margin-left: auto; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.dy-archive h2, .dy-month h2 { margin: 0; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
/* A list: one line a story, and the source named at its end. */
.dy-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.dy-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dy-tx { font-size: var(--t-lead); line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
/* A line of a calendar: its day is a label in a column of its own, and what happens that day reads beside it. */
.dy-tx.dy-on { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 2px 14px; align-items: baseline; min-width: 0; }
.dy-when { font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--up); overflow-wrap: anywhere; }
.dy-tx b { font-weight: 600; color: var(--ink); }
.dy-src { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 26px; max-width: 100%; font-family: var(--mono); font-size: var(--t-label); color: var(--dim); text-decoration: none; text-align: right; overflow-wrap: anywhere; }
a.dy-src { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
a.dy-src:hover { color: var(--ink); }
/* A line with the address of its story is one link, as wide as the row, so a thumb finds it. Its source is
   written in the ink of the page with the mark of a way out, and a line without a link keeps the quiet one. */
.dy-rows li.dy-linked { display: block; padding: 0; }
.dy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: baseline; min-width: 0; padding: 14px 0; text-decoration: none; border-radius: 0; }
.dy-row .dy-src { gap: 5px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.dy-out { flex: none; width: 11px; height: 11px; color: var(--up); }
.dy-row:hover .dy-tx, .dy-row:focus-visible .dy-tx { color: var(--ink); }
.dy-row:hover .dy-src, .dy-row:focus-visible .dy-src { text-decoration-color: var(--up); }
.dy-row:active { background: var(--hover); }
/* On a phone a line takes the whole width and its source stands under it. Until 2026-10-11 the source kept a
   narrow column at the end of the line and the text beside it broke into five and six short lines. */
@media (max-width: 599px) {
  .dy-rows li, .dy-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dy-src { justify-content: flex-start; text-align: left; }
  .dy-tx.dy-on { grid-template-columns: minmax(0, 1fr); }
}

/* The view is the one part written as an opinion: it stands in a panel of its own, apart from the lists of facts. */
.dy-take { display: grid; gap: 14px; min-width: 0; padding: clamp(18px, 4vw, 26px); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); }
.dy-view p { margin: 0; max-width: 66ch; font-size: var(--t-num); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.dy-view p b { font-weight: 600; color: var(--ink); }
.dy-view .dy-close { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }

/* The editions next to this one, the way to follow, and the editions before. */
.dy-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.dy-pager a { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; }
.dy-pager a:hover { border-color: var(--line-3); background: var(--hover); }
.dy-pager a:last-child { text-align: right; }
.dy-pager span { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dy-pager b { font-weight: 500; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }

.dy-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); }
.dy-follow p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: var(--t-base); line-height: 1.5; color: var(--text); }
.dy-follow p b { font-weight: 600; color: var(--ink); }
.dy-follow .btn { height: 42px; }
/* The email list: a field and a button under the line about the daily, the full width of the card. */
.dy-sub { flex: 1 1 100%; display: grid; gap: 8px; min-width: 0; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.dy-sub-label { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.dy-sub-row { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.dy-sub input[type="email"] { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--field); color: var(--ink); font: inherit; font-size: var(--t-base); }
.dy-sub input[type="email"]::placeholder { color: var(--faint); }
.dy-sub input[type="email"]:focus-visible, .dy-sub .btn:focus-visible, .dy-notice .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dy-sub .btn { flex: none; justify-content: center; color: var(--ink); cursor: pointer; background: transparent; }
.dy-sub .btn:disabled, .dy-notice .btn:disabled { opacity: .55; cursor: default; }
.dy-sub-note { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--dim); }
.dy-sub-note[data-tone="up"] { color: var(--ink); font-weight: 600; }
.dy-sub-note[data-tone="down"] { color: var(--down); }
/* Kept out of sight and out of reach of the keyboard, inside the window: only a script that fills every field finds it. */
.dy-sub-trap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 479px) {
  .dy-sub .btn { flex: 1 1 100%; }
}

/* What a link from an email says when it lands here: a card at the top of the page. */
.dy-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-width: 0; padding: 16px 20px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); }
.dy-notice[data-tone="up"] { border-color: var(--up); }
.dy-notice p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: var(--t-base); line-height: 1.5; color: var(--ink); }
.dy-notice .btn { height: 42px; cursor: pointer; }

.dy-archive, .dy-month { display: grid; gap: 12px; min-width: 0; }
.dy-archive .btn { justify-self: start; height: 42px; color: var(--ink); }
.dy-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.dy-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.dy-list time { font-family: var(--mono); font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.dy-list a span { font-size: var(--t-base); line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.dy-list a:hover span { color: var(--ink); }
@media (max-width: 479px) {
  .dy-list a { grid-template-columns: minmax(0, 1fr); }
}

.dy-foot { padding-top: 22px; padding-bottom: 28px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.dy-foot p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--faint); }
.dy-foot a { display: inline-block; padding: 5px 0; color: var(--text); }
.dy-foot a:hover { color: var(--ink); }
/* On a phone the bar of the sections is fixed over the bottom of the window: the foot ends above it. */
@media (max-width: 999px) {
  .dy-foot { padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom, 0px)); }
}