/**
 * One-Time Secret — tool styles
 *
 * Layout and the two monospace text areas. Cards, alerts, inputs, the timeline
 * and the stat tiles are frikwork's; nothing here restyles a frikwork
 * component, and every colour is a --fw-* token so both themes work.
 */

.ots-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fw-space-lg);
  align-items: start;
}

.ots-col {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
  min-width: 0;
}

/*
 * frikwork sets `display` on .fw-field and .fw-grid, and an author rule always
 * beats the UA stylesheet's `[hidden] { display: none }` regardless of
 * specificity. Without this, `hidden` on one of those elements does nothing —
 * which for the panel holding a decrypted secret would mean showing it. Scoped
 * to this tool rather than fixed globally, because app.css is shared.
 */
.ots-layout [hidden] { display: none !important; }

/* --- Create --------------------------------------------------------------- */

.ots-secret {
  min-height: 9rem;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ots-counter {
  display: flex;
  justify-content: space-between;
  gap: var(--fw-space-md);
  color: var(--fw-text-muted);
}

.ots-over { color: var(--fw-danger); font-weight: 700; }

.ots-pill {
  padding: 0.05rem 0.45rem;
  border-radius: var(--fw-radius-sm);
  background: var(--fw-bg-2);
  color: var(--fw-brand-text);
  font-weight: 700;
}

.ots-scale {
  display: flex;
  justify-content: space-between;
  color: var(--fw-text-muted);
}

.ots-zk { align-items: flex-start; margin-bottom: var(--fw-space-md); }
.ots-zk input { margin-top: 0.15rem; }
.ots-zk strong i { color: var(--fw-brand-text); }
.ots-zk small { display: block; margin-top: 0.15rem; }

/* --- The generated link --------------------------------------------------- */

.ots-linkfield { margin-top: var(--fw-space-md); }

/*
 * The link is long and is meant to be selected in one gesture, so it does not
 * get the muted read-only treatment other read-only inputs get.
 */
.ots-link[readonly] {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8rem;
  opacity: 1;
  cursor: text;
  background: var(--fw-bg-2);
}

.ots-facts { margin-bottom: var(--fw-space-md); }
.ots-facts .app-stat { padding: var(--fw-space-md); }
.ots-facts .app-stat__value { font-size: 1.05rem; }

.ots-another { margin-top: var(--fw-space-xs); }

/* --- Explainers ----------------------------------------------------------- */

.ots-how .fw-timeline__body code {
  font-size: 0.85em;
  padding: 0.05rem 0.25rem;
  border-radius: var(--fw-radius-sm);
  background: var(--fw-bg-hover);
}

.ots-lede {
  margin: 0 0 var(--fw-space-md);
  color: var(--fw-text-2);
  font-size: 0.9rem;
}

.ots-notes {
  margin: var(--fw-space-md) 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-sm);
  color: var(--fw-text-2);
  font-size: 0.875rem;
}

.ots-notes strong { color: var(--fw-text); }

/* --- Retrieved ------------------------------------------------------------ */

.ots-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
}

@media (max-width: 1000px) {
  .ots-layout { grid-template-columns: 1fr; }
}