/* The quotes page. Tokens come from site.css. */

.quotes-app {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: min(100%, 34rem);
}

/* --- where quotes come from ---------------------------------------------- */

.source {
  display: flex;
  padding: .25rem;
  gap: .25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.source button {
  flex: 1;
  padding: .55rem .8rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.source button[aria-pressed="true"] { color: var(--paper); background: var(--accent); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .source button[aria-pressed="true"] { color: #10201b; }
}

/* --- the quote ----------------------------------------------------------- */

.quote {
  margin: 0;
  padding: 1.8rem 1.6rem 1.5rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.quote blockquote {
  margin: 0;
  font-size: clamp(1.15rem, 4.2vw, 1.4rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.quote blockquote::before { content: "“"; }
.quote blockquote::after  { content: "”"; }

.quote figcaption { color: var(--ink-soft); }
.quote figcaption:empty { display: none; }

.quote.is-empty { border-left-color: var(--line); }
.quote.is-empty blockquote { color: var(--ink-faint); font-size: 1rem; }
.quote.is-empty blockquote::before,
.quote.is-empty blockquote::after { content: none; }

/* --- buttons, as on the other pages -------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.actions button {
  flex: 1 1 8rem;
  padding: .75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.actions button:hover:not(:disabled) { border-color: var(--accent); }
.actions button:disabled { opacity: .55; cursor: default; }
.actions button[hidden] { display: none; }

.actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .actions button.primary { color: #10201b; }
}

/* --- my quotes ----------------------------------------------------------- */

.mine { display: flex; flex-direction: column; gap: .9rem; margin-top: .8rem; }
.mine h2 { margin: 0; font-size: 1.25rem; }

.add { display: flex; flex-direction: column; gap: .4rem; }
.add label { font-weight: 600; font-size: .95rem; }
.add .actions { margin-top: .3rem; }

.add textarea,
.add input {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.add textarea { resize: vertical; }

.add textarea:focus,
.add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.message { margin: 0; min-height: 1.3em; color: var(--ink-soft); font-size: .95rem; }

.saved { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }

.saved li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .8rem .5rem .8rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.saved-words { flex: 1; min-width: 0; }
.saved-words p { margin: 0; overflow-wrap: anywhere; }
.saved-words .saved-author { color: var(--ink-soft); font-size: .92rem; margin-top: .2rem; }

.saved-remove {
  flex: none;
  width: 2rem;
  height: 2rem;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.saved-remove:hover { color: var(--warn); background: var(--warn-soft); }