/* Indicators — C05 ; Properties — C08 (direction A). Progress, FreshnessDot,
   ConnectionIndicator, CodeValue, CodeBlock — tels quels, tokens A. */

.indicators { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); color: var(--text); }
.indicator { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
a.indicator { color: var(--accent); }
a.indicator:hover { text-decoration: underline; }
.indicator .ui-icon { width: 18px; height: 18px; color: var(--text-muted); }
a.indicator .ui-icon { color: currentColor; }
.indicator-success, .indicator-success .ui-icon { color: var(--success); }
.indicator-warning, .indicator-warning .ui-icon { color: var(--warning); }
.indicator-danger, .indicator-danger .ui-icon { color: var(--danger); }

.properties { min-width: 0; padding-left: 28px; border-left: 1px solid var(--border); font-size: var(--text-sm); overflow-wrap: anywhere; }
.properties dl { margin: 0; }
.properties dt { color: var(--text-muted); margin: 24px 0 2px; }
.properties dl > dt:first-child { margin-top: 0; }
.properties dd { margin: 0; color: var(--text); }
.properties-toggle { display: none; }
.properties-more {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-4); padding: 0;
  border: 0; background: none; color: var(--accent); font-size: var(--text-sm); font-weight: 600;
}
.properties-more[aria-expanded="true"] .disclosure-chevron, .properties-toggle[aria-expanded="true"] .disclosure-chevron { transform: rotate(45deg); }
.properties-more + dl > dt:first-child { margin-top: var(--space-2); }
.properties .disclosure-chevron {
  width: 7px; height: 7px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--fast);
}
@media (max-width: 860px) {
  .properties { padding: var(--space-2) 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .properties-toggle {
    display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: var(--space-2); align-items: center;
    width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; text-align: left; color: var(--text);
  }
  .properties-toggle-title { font-size: var(--text-body); font-weight: 600; }
  .properties-toggle-summary { grid-column: 2; color: var(--text-muted); }
  .properties:not(.open) .properties-body { display: none; }
  .properties-body { padding: var(--space-2) 0 var(--space-4) 20px; }
}

.progress { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: var(--text-sm); }
.progress progress { flex: 1 1 120px; min-width: 80px; height: 8px; appearance: none; border: 0; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 4px; }
.progress progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.progress progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.progress-text { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.dot-fresh { background: var(--success); }
.dot-late { background: var(--warning); }
.dot-stale { background: var(--danger); }
.connection { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.connection-live .dot { background: var(--success); }
.connection-retry .dot { background: var(--warning); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.code-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.code-value code, .code-block pre { font-family: var(--mono); }
.code-value code { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.code-block { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; }
.code-block pre {
  width: 100%; max-height: 360px; margin: 0; padding: var(--space-3) var(--space-4); overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-2);
  font-size: 13px; line-height: 20px; white-space: pre;
}

/* Liste de raccourcis (aide « ? »). */
.shortcut-list { display: grid; gap: var(--space-2); margin: 0; }
.shortcut { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.shortcut dt { display: flex; gap: 4px; }
.shortcut dd { margin: 0; font-size: var(--text-sm); }