/* styles/quotes.css — matches the app aesthetic and keeps inputs clickable */

/* Page safety: never let overlays block interaction on this page */
#page-quotes,
#page-quotes * {
  pointer-events: auto;
}

/* Form card */
.quote-form.card{
  padding:16px;
  position: relative;   /* create a stacking context for inner elements */
}

/* Textarea (quote) */
#quote-text{
  width:100%;
  min-height:140px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  background:transparent;
  color:var(--ink);
  resize:vertical;

  position: relative;
  z-index: 2;                 /* ensure it sits above any decorative layers */
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.quote-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}

/* Author input + button */
#quote-author{
  flex:1 1 auto;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:transparent;
  color:var(--ink);

  position: relative;
  z-index: 2;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.quote-form .cta{
  flex:0 0 auto;
  position: relative;
  z-index: 2;
}

/* List container */
.quote-list.card{
  padding:12px 14px;
  margin-top:12px;
}

/* UL */
#quote-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}

/* Each quote item */
.quote-item{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.quote-item:last-child{ border-bottom:none; }

.quote-text{
  font-size:18px; line-height:1.5; color:var(--ink);
}
.quote-meta{
  margin-top:4px; color:var(--muted); font-size:14px;
}

/* Delete button */
.quote-item .del{
  flex:0 0 auto;
  position: relative;
  z-index: 2;
}

/* Mobile tweaks */
@media (max-width: 720px){
  #quote-text{ min-height:120px; }
  .quote-row{ flex-direction:column; }
  .quote-form .cta{ width:100%; }
}