/* SPDX-License-Identifier: AGPL-3.0-or-later */
  /* Dreams: the same column of cards as patterns. The dream realm is
     signalled by the weather line and the tone pills, not a left rule. */
  #dream-weather { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
  #dream-weather .w { font-style: italic; color: var(--accent); font-size: .95rem; }
  #dream-weather .m { font: .78rem var(--font-ui); color: var(--text-dim); }
  #dream-tones { margin-top: .7rem; }
  #dream-notice { margin-top: .9rem; }
  #dream-notice:empty { display: none; }
  #dream-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
  .dream-card .head { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; }
  .dream-card h3 { font: 600 .95rem var(--font-ui); color: var(--text-dim); }
  .dream-tone {
    border: 0; background: var(--bg-input); color: var(--accent);
    font: .72rem/1 var(--font-ui); height: 1.5rem; padding: 0 .6rem; border-radius: var(--radius-pill);
  }
  .dream-tone:hover { color: var(--text); }
  .dream-card .head .text { margin-left: auto; font-size: .78rem; }
  .dream-card p { margin: .6rem 0 0; text-wrap: pretty; white-space: pre-wrap; }
  .dream-cast {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-top: .6rem;
    font: .8rem var(--font-ui); color: var(--text-dim);
  }
  .dream-cast .sc-label { margin-right: 0; }
  .dream-cast button {
    border: 0; border-bottom: 1px dotted var(--border); background: transparent; color: var(--text-dim);
    font: inherit; padding: 0; border-radius: 0; cursor: pointer;
  }
  .dream-cast button:hover { color: var(--accent); }
  .dream-read {
    margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--border);
    color: var(--text-dim); font-style: italic; font-size: .92rem;
  }
  #dream-empty { margin-top: 1.2rem; }