/* Journal media: the attach row under "Write an entry", the pending strip, and
   how a saved photo, voice note or clip reads inside the journal list.
   Design tokens only, so night and day both hold. */

/* ------------------------------------------------------------- attach row */
.jm-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.jm-btn{padding:9px 14px;font-size:13.5px}
.jm-hint{font:700 11px/1.4 var(--mono);color:var(--mute);flex:1;min-width:130px}

.jm-rec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:9px 12px;
  border:1px solid var(--bad);border-radius:12px;background:var(--panel2)}
.jm-rec[hidden]{display:none}
.jm-rec b{font:800 15px/1 var(--mono);color:var(--ink);min-width:44px}
.jm-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad);
  font-style:normal;flex:none;animation:jm-blink 1.1s infinite}
@keyframes jm-blink{50%{opacity:.25}}
.jm-stop{padding:7px 14px;font-size:13px;margin-left:auto}

/* ---------------------------------------------------------- pending strip */
.jm-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-top:10px}
.jm-strip:empty{display:none}
.jm-card{position:relative;padding:10px 26px 10px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.jm-kind{font:900 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--hot)}
.jm-card b{display:block;margin:5px 0 7px;font-size:12.5px;color:var(--ink);word-break:break-word}
.jm-card small{display:block;margin-top:6px;font:700 10px/1.4 var(--mono);color:var(--mute)}
.jm-card .bar{margin-top:2px}
.jm-thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;background:var(--panel)}
.jm-err{font-size:12px;line-height:1.45;color:var(--bad)}
.jm-x{position:absolute;right:5px;top:5px;padding:4px;font:900 12px/1 var(--mono);color:var(--dim)}
.jm-x:hover{color:var(--bad)}

/* a stand-in waveform: a voice note has something to look at before it plays */
.jm-wave{display:flex;align-items:center;gap:3px;height:46px;padding:0 1px}
.jm-wave i{flex:1;border-radius:2px;background:linear-gradient(180deg,var(--hot),var(--hot2));opacity:.7}
.jm-wave i:nth-child(4n){height:100%}
.jm-wave i:nth-child(4n+1){height:38%}
.jm-wave i:nth-child(4n+2){height:72%}
.jm-wave i:nth-child(4n+3){height:52%}

/* ---------------------------------------------------- attachments on entries */
.jm-att{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.jm-a{min-width:0}
.jm-a.photo{flex:0 0 auto}
.jm-a.audio,.jm-a.video{flex:1 1 190px}
.jm-a img{display:block;width:106px;height:80px;object-fit:cover;border:1px solid var(--line);border-radius:10px;cursor:zoom-in}
.jm-a img:hover{border-color:var(--hot)}
.jm-a figcaption{max-width:106px;margin-top:4px;font:700 10px/1.3 var(--mono);color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jm-play{display:flex;align-items:center;gap:8px;width:100%;padding:8px 11px;text-align:left;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:700 12.5px/1.25 var(--mono)}
.jm-play:hover{border-color:var(--hot);color:var(--hot)}
.jm-play span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jm-player{display:block;width:100%;border-radius:10px;background:var(--panel)}
video.jm-player{max-height:260px}

.jm-tt{display:block;padding:6px 0;font:800 10px/1 var(--mono);letter-spacing:.9px;text-transform:uppercase;color:var(--cool)}
.jm-tt:hover{color:var(--hot)}
.jm-tx{margin-top:4px;padding-left:10px;border-left:2px solid var(--line);max-height:180px;overflow:auto}
.jm-tx[hidden]{display:none}
.jm-tx p{font-size:12.5px;line-height:1.55;color:var(--mute);white-space:pre-wrap;word-break:break-word}
.jm-tx .jm-tr{margin-top:6px;color:var(--grape)}

/* ---------------------------------------------------------------- lightbox */
.jm-lb .sheet{max-width:880px;padding:14px}
.jm-lb img{display:block;width:100%;border-radius:12px;background:var(--panel2)}
.jm-lb-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.jm-lb-bar span{flex:1;min-width:0;font:700 12px/1.4 var(--mono);color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:700px){
  .jm-strip{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .jm-hint{flex-basis:100%}
}