/* =========================================================
   Clip to your notebook (clip.html): a small window, or a phone tab.
   The site's tokens (css/style.css) in both themes.
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
html { font-size: 16px; }
.cl-body { display: flex; justify-content: center; }
.cl {
  --cl-pad: 18px;
  width: 100%;
  max-width: 520px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top, 0px)) var(--cl-pad) max(18px, env(safe-area-inset-bottom, 0px));
}
.cl-head { display: flex; align-items: center; gap: 10px; }
.cl-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--purple) 14%, transparent);
  color: var(--purple);
  font-size: 1.05rem;
}
.cl-title { margin: 0; font: 400 1.5rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.cl-what {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elevated);
}
.cl-quote {
  margin: 0;
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--purple);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cl-src {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
}
.cl-src:hover { border-color: var(--border-hover); }
.cl-src-ic { flex: none; color: var(--blue); font-family: var(--font-mono); }
.cl-src-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cl-src-t { font-size: 0.9rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-src-d { font: 400 0.72rem/1.3 var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere; }
.cl-form { display: flex; flex-direction: column; gap: 14px; }
.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-label { font: 600 0.7rem/1.2 var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cl-label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cl-select { position: relative; display: block; }
.cl-select select, .cl-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
}
.cl-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; min-height: 46px; }
.cl-select svg { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.cl-field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.cl-select select:focus, .cl-field textarea:focus { border-color: color-mix(in srgb, var(--purple) 65%, transparent); }
/* Save stays in reach: pinned to the bottom until the form scrolls up to it
   (a phone tab with big text, or a long passage). */
.cl-acts {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin: 0 calc(-1 * var(--cl-pad));
  padding: 10px var(--cl-pad) max(10px, env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  font: 600 0.98rem/1 var(--font-heading);
  text-decoration: none;
  cursor: pointer;
}
.cl-acts .cl-btn { flex: 1 1 0; }
.cl-acts .cl-primary { flex-grow: 1.6; }
.cl-primary { border: 0; background: var(--purple); color: #fff; }
.cl-primary:disabled { opacity: 0.6; cursor: default; }
.cl-ghost { border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); }
.cl-ghost:hover { border-color: var(--border-hover); }
.cl-btn:focus-visible, .cl-src:focus-visible { outline: 2px solid color-mix(in srgb, var(--purple) 65%, transparent); outline-offset: 2px; }
.cl-err { margin: 0; font-size: 0.86rem; color: var(--red); }
.cl-done, .cl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10vh 8px 0; }
.cl-done-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  color: var(--teal);
  animation: clPop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cl-done-mark svg { width: 28px; height: 28px; }
.cl-done-t, .cl-empty-t { margin: 6px 0 0; font: 400 1.5rem/1.25 var(--font-display); overflow-wrap: anywhere; }
.cl-done-s, .cl-empty-s { margin: 0 0 12px; max-width: 34ch; color: var(--text-dim); line-height: 1.55; }
.cl-foot { margin: auto 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
[hidden] { display: none !important; }
@keyframes clPop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-done-mark { animation: none; } }
@media (max-width: 360px) { .cl { --cl-pad: 14px; } .cl-title { font-size: 1.3rem; } }