/* prt.run - Insights. Variables dans base.css ; clair, pas de mode sombre. */
:root {
  --text-scale: 1.1;  /* tout le texte de la page +10 % */
}
body {
  font: calc(14.5px * var(--text-scale))/1.4 var(--font);
  color: var(--ink);
  padding: 8px 16px;
  min-height: 100vh;
  background:
    radial-gradient(
      900px 500px at 50% 0%,
      var(--surface),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(180deg, #fdfdfb 0%, var(--bg) 100%);
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.back {
  flex: none;
  padding-left: 6px;
}
/* menu line: Insights · clock (freshness on hover) … exchanges · prt.run */
.clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: default;
}
/* DSEG7 Classic by keshikan, SIL OFL 1.1 (github.com/keshikan/DSEG) */
@font-face {
  font-family: "DSEG7";
  src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-display: block;
}
/* watch display: seven-segment digits */
.clock b {
  font: calc(17px * var(--text-scale))/1 "DSEG7", var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.clock > span {  /* the date */
  font: calc(12px * var(--text-scale)) var(--mono);
  color: var(--muted);
}
.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  background: var(--faint);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 127, 55, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(26, 127, 55, 0); }
}
/* numbers: only the digits that changed flip in, tinted green/red, then settle to ink */
.roll {
  display: inline-block;
  animation: roll 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.roll.up {
  animation-name: roll-up;
}
.roll.down {
  animation-name: roll-down;
}
@keyframes roll {
  from { transform: translateY(-55%) rotateX(80deg); opacity: 0; }
}
@keyframes roll-up {
  from { transform: translateY(-55%) rotateX(80deg); opacity: 0; color: var(--up); }
  45% { color: var(--up); }
}
@keyframes roll-down {
  from { transform: translateY(55%) rotateX(-80deg); opacity: 0; color: var(--down); }
  45% { color: var(--down); }
}
.grid {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.g5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.g3 {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr);  /* sentiment · world economy · country */
}
.gp {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 12px;
  min-width: 0;
  box-shadow: 0 12px 28px -26px rgba(27, 42, 58, 0.55);
}
h2 {
  font-size: calc(11px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* carte pays : le titre est le menu de choix, même typo que les autres titres */
h2 select {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0 2px 0 0;
  cursor: pointer;
}
.pmkt {
  font: calc(12.5px * var(--text-scale)) var(--mono);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 4px;
}
.pmkt b {
  color: var(--ink);
  font-weight: 600;
}
/* market sessions strip: open = green dot, closed = muted */
/* exchanges, centred in the menu line: name, a dot (pulses when open) and a timer; details on hover */
.sessions {
  display: flex;
  gap: 16px;
  margin: 0 auto;
  font: calc(12.5px * var(--text-scale)) var(--mono);
  color: var(--muted);
}
.sess {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.sess > span {
  display: inline-block;
  min-width: 8ch;  /* countdown box stays put: rolling digits, and hours going from 9 to 10 */
}
.sess b {
  font: 600 calc(12.5px * var(--text-scale)) var(--font);
  color: var(--ink);
}
.sess .pulse {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--faint);
}
.sess.open {
  color: var(--up);
}
.sess.open .pulse {
  background: var(--up);
  box-shadow: none;
  animation: pulse 2s infinite;
}
/* a new line enters on top and pushes the stack down; the oldest fades out */
.push {
  animation: push 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes push {
  from { opacity: 0; transform: translateY(-10px); max-height: 0; }
  to { max-height: 14em; }
}
.drop {
  animation: drop 0.6s ease-in forwards;
  overflow: hidden;
}
@keyframes drop {
  to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.trend {  /* the trio's trend, an arrow beside the INSIGHTS title */
  font: 700 calc(18px * var(--text-scale))/1 var(--font);
  letter-spacing: 0;
  position: relative;
  top: -3px;  /* the arrow glyph sits low in its box: lift it to the title's centre */
}
.trend[hidden] {
  display: none;
}
.trend.positif {
  color: var(--up);
}
.trend.neutre {
  color: var(--gold);
}
.trend.negatif {
  color: var(--down);
}
.ess {
  border-left: 3px solid var(--gold);
  margin-bottom: 8px;
}
.ins {
  font: 600 calc(20px * var(--text-scale))/1.4 var(--font);  /* plain sans: easiest to read */
  color: var(--ink);
  margin: 2px 0 6px;
}
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 3px;
}
.acts li {
  border: 0;
  padding: 0 0 0 14px;
  position: relative;
  font-size: calc(15px * var(--text-scale));
  font-weight: 500;
}
.acts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

ul {
  list-style: none;
}
li {
  padding: 3px 0;
  border-top: 1px solid var(--line);
}
li:first-child {
  border-top: 0;
}
.src {
  display: block;
  font: calc(11.5px * var(--text-scale)) var(--mono);
  color: var(--faint);
  margin-top: 1px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font: calc(13px * var(--text-scale)) var(--mono);
}
th {
  font: 600 calc(10px * var(--text-scale)) var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
  padding: 0 0 3px 6px;
  border-bottom: 1px solid var(--line);
}
th:first-child {
  text-align: left;
  padding-left: 0;
}
td {
  padding: 3px 0;
  white-space: nowrap;
  border-top: 1px solid var(--hover);
}
tbody tr:first-child td {
  border-top: 0;
}
td.l {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  width: 38%;
  font: 500 calc(14px * var(--text-scale)) var(--font);
}
td.n {
  text-align: right;
  padding-left: 6px;
  font-weight: 600;
}
td.n .u {
  font-weight: 400;
  font-size: calc(11px * var(--text-scale));
  color: var(--muted);
  margin-left: 2px;
}
td.c {
  text-align: right;
  padding-left: 5px;
}
.pill {
  display: inline-block;
  min-width: 46px;
  text-align: right;
  padding: 0 3px;
  border-radius: 4px;
  font-size: calc(12px * var(--text-scale));
}
.pill.none {
  background: none;
  color: var(--faint);
}
.pill.up {
  background: rgba(26, 127, 55, 0.1);
}
.pill.down {
  background: rgba(192, 57, 43, 0.1);
}
.pill.flat {
  background: var(--hover);
}
td.s {
  width: 40px;
  padding-left: 6px;
}
tr.stale td {
  opacity: 0.45;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.flat {
  color: var(--muted);
}
/* sentiment: one arc filling 0 → 100, square ends, the number, an emoji and one word; details on hover */
.dash {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 10px auto 0;
}
.dash path {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
}
.dash .track {
  stroke: var(--line);
}
.dash .fill {
  stroke: var(--primary);
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.9s ease-out;
}
.dash .score {
  font: calc(44px * var(--text-scale))/1 "DSEG7", var(--mono);
  fill: var(--ink);
  text-anchor: middle;
}
.dash .face {
  font: 600 calc(17px * var(--text-scale)) var(--font);
  fill: var(--muted);
  text-anchor: middle;
}
@media (prefers-reduced-motion: reduce) {
  .dash .fill {
    transition: none;
  }
}
.odds {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 3px;
  font: 600 calc(11px * var(--text-scale)) var(--mono);
  text-transform: uppercase;
  vertical-align: 1px;
}
.odds.likely {
  background: var(--gold-soft);
  color: var(--ink);
}
.odds.toss-up {
  background: var(--hover);
  color: var(--muted);
}
.odds.unlikely {
  border: 1px solid var(--line);
  color: var(--faint);
}
.empty {
  color: var(--faint);
  font-style: italic;
}
@media (min-width: 1301px) and (max-width: 1700px) {
  /* five narrow cards: the 3-month sparkline goes, the name stays readable */
  th:last-child,
  td.s {
    display: none;
  }
}
@media (max-width: 1300px) {
  .g5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .g5,
  .g3,
  .gp {
    grid-template-columns: minmax(0, 1fr);
  }
  .acts {
    flex-direction: column;
  }
  .ins {
    font-size: calc(19px * var(--text-scale));
  }
  th:last-child,
  td.s {
    display: none;
  }
  td.l {
    width: 44%;
  }
  .back {
    order: 2;
    margin-left: auto;
  }
  .clock {
    order: 3;
    margin-left: 0;
  }
  .sessions {
    order: 4;
    margin-left: 0;
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sess.open .pulse,
  .roll,
  .push,
  .drop {
    animation: none;
  }
}