/* Clip Factory — moments, each waiting on a decision. The screen is quiet until
   something asks for you, so only a proposed or rendering moment is loud. */
.cap-cf{display:flex;flex-direction:column;gap:10px;height:100%}
.cap-cf-head{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:8px;
  border-bottom:var(--rule) solid var(--hairline)}
.cap-cf-fact{font-size:max(var(--touch-text-floor,0rem),.6875rem);color:var(--label-ink,var(--ink-2));display:flex;align-items:baseline;gap:5px}
.cap-cf-fact b{font-family:var(--mono);font-size:max(var(--touch-text-floor,0rem),.8125rem);color:var(--ink);font-weight:500}
.cap-cf-fact.on b{color:var(--accent)}
.cap-cf-label{font-size:max(var(--touch-text-floor,0rem),.625rem);letter-spacing:.12em;text-transform:var(--label-case,uppercase);
  color:var(--label-ink,var(--ink-2));font-weight:700}
.cap-cf-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.cap-cf-empty{font-size:max(var(--touch-text-floor,0rem),.75rem);color:var(--ink-3);font-style:italic;padding:4px 0}
.cap-cf-moment{display:flex;gap:9px;padding:8px 9px;border:var(--rule) solid var(--hairline);
  border-radius:var(--r-sm);background:var(--card)}
.cap-cf-moment.prop{border-color:color-mix(in oklab,var(--accent) 40%,var(--hairline))}
.cap-cf-moment .tc{font-family:var(--mono);font-size:max(var(--touch-text-floor,0rem),.65625rem);color:var(--ink-3);flex:none;padding-top:2px}
.cap-cf-moment .body{flex:1;min-width:0}
.cap-cf-moment .quote{font-size:max(var(--touch-text-floor,0rem),.8125rem);font-weight:600;color:var(--ink);line-height:1.4}
.cap-cf-moment .why{font-size:max(var(--touch-text-floor,0rem),.71875rem);color:var(--ink-3);margin-top:2px}
.cap-cf-moment .bar{height:4px;border-radius:2px;background:var(--paper-2);overflow:hidden;margin-top:6px}
.cap-cf-moment .bar i{display:block;height:100%;background:var(--accent);transition:width .4s linear}
.cap-cf-moment .short{font-size:max(var(--touch-text-floor,0rem),.75rem);color:var(--green);margin-top:5px}
.cap-cf-moment .acts{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:none}
.cap-cf-moment .acts button{height:25px;padding:0 10px;border:var(--rule) solid var(--hairline-2);
  border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink);font-size:max(var(--touch-text-floor,0rem),.6875rem);
  font-weight:600;cursor:pointer;white-space:nowrap}
.cap-cf-moment .acts button.solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.cap-cf-moment .state{font-size:max(var(--touch-text-floor,0rem),.65625rem);font-weight:700;letter-spacing:.06em;
  text-transform:var(--label-case,uppercase);color:var(--ink-3);white-space:nowrap}
.cap-cf-moment .state.ok,.cap-cf-moment .state.done{color:var(--green)}
.cap-cf-moment .state.rendering,.cap-cf-moment .state.queued{color:var(--gold)}
.cap-cf-night{display:flex;justify-content:space-between;font-size:max(var(--touch-text-floor,0rem),.71875rem);color:var(--ink-3);
  border-top:var(--rule) solid var(--hairline);padding-top:7px}
.cap-cf-night b{font-family:var(--mono);color:var(--ink-2)}

/* S4: add a moment on a take; a short on another device is named, not linked. */
.cap-cf-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.cap-cf-add input, .cap-cf-add select, .cap-cf-add button {
  font: inherit; color: inherit; background: transparent; min-height: 30px;
  border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 6px; padding: 4px 8px;
}
.cap-cf-add input[name=in], .cap-cf-add input[name=out] { width: 6.5em; }
.cap-cf-add input[name=quote] { flex: 1; min-width: 10em; }
.cap-cf-msg { color: var(--ink-2, inherit); min-height: 1em; margin-top: 6px; }
.cap-cf-moment .short.away { color: var(--ink-3, inherit); }