/* A reading stays visibly separate from the original and from execution. */
#incoming-reading { display: grid; gap: 14px; min-width: 0; }
#incoming-reading > p { margin: 0; }
#incoming-reading h3 { margin: 14px 0 0; }
#incoming-reading h4 { margin: 10px 0 0; }
#incoming-reading .hint { line-height: 1.6; overflow-wrap: anywhere; }
#incoming-reading [role="alert"]:empty { display: none; }
/* The progress line stays in the page with nothing to say, so a screen reader
   is already listening when a press puts words in it; hidden, it would not
   be. Out of the grid while empty, it takes no row and no gap. */
#incoming-reading [data-incoming-progress]:empty { position: absolute; }
#incoming-reading [role="alert"] { color: var(--warn); }
#incoming-reading .btn { white-space: normal; min-height: var(--tap); }
#incoming-reading summary { min-height: var(--tap); padding-block: 12px; }
#incoming-reading [data-incoming-history-rows] > div { display: grid; gap: 12px; }
#incoming-reading [data-incoming-history-row] summary { overflow-wrap: anywhere; }
.incoming-reading-value { margin: 0; padding: 16px; border-radius: 12px; }
.incoming-reading-value > p { margin: 8px 0 0; overflow-wrap: anywhere; }
.incoming-reading-value > p:not(.hint) { font-size: 1.2rem; color: var(--charcoal); }
.incoming-reading-check { display: flex; gap: 12px; align-items: flex-start;
  min-height: var(--tap); padding-block: 10px; line-height: 1.5; cursor: pointer; }
.incoming-reading-check input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px;
  min-height: 22px; margin: 1px 0 0; accent-color: var(--forest); }
@media (max-width: 390px) {
  .incoming-reading-value { padding: 12px; }
  #incoming-reading .btn { width: 100%; }
}