/* Cadenza Arthouse Classifieds. The studio's style.css supplies the masthead, type and palette; this file adds only
   the list, the form and the messages. Big targets, strong contrast, and nothing that depends on colour alone. */

[hidden] { display: none !important; }       /* a rule with display:grid would otherwise beat the hidden attribute */
.cls-main a { text-underline-offset: 3px; }
.cls-small { font-size: 15px; color: var(--dim); margin: 6px 0 14px; max-width: 62ch; }
.cls-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

a.cls-btn, button.cls-btn {
  display: inline-block; font: inherit; font-weight: 800; font-size: 18px; line-height: 1.2;
  padding: 12px 20px; border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; min-height: 48px;
}
a.cls-btn:hover, a.cls-btn:focus, button.cls-btn:hover, button.cls-btn:focus { background: var(--bronze); border-color: var(--bronze); color: #fff; }
button.cls-btn:disabled { opacity: .5; cursor: wait; }
button.cls-btn-quiet { background: transparent; color: var(--ink); }
button.cls-btn-quiet:hover, button.cls-btn-quiet:focus { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cls-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.cls-chip {
  font: inherit; font-weight: 700; font-size: 16px; padding: 8px 14px; border: 2px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer; min-height: 44px;
}
.cls-chip.on { background: var(--ink); color: var(--paper); }

.cls-list { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.cls-ad { background: var(--card); border: 1px solid #d9d2c6; border-radius: 14px; padding: 18px 20px; }
.cls-ad h3 { margin: 0 0 4px; }
.cls-meta { color: var(--dim); font-size: 16px; margin: 0 0 10px; }
.cls-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.cls-foot { font-size: 15px; color: var(--dim); margin: 0 0 12px; }
.cls-empty { color: var(--dim); }
.cls-replyholder { margin-top: 12px; }

.cls-form { display: grid; gap: 4px; max-width: 640px; }
.cls-form label { font-weight: 700; margin-top: 14px; }
.cls-form input[type=text], .cls-form select, .cls-form textarea, input.cls-link {
  font: inherit; font-size: 18px; padding: 12px 14px; border: 2px solid var(--rule); border-radius: 10px;
  background: #fff; color: var(--ink); width: 100%; box-sizing: border-box;
}
.cls-form input:focus, .cls-form select:focus, .cls-form textarea:focus, input.cls-link:focus { outline: 3px solid var(--bronze); outline-offset: 1px; }
.cls-check { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; }
.cls-check input { width: 26px; height: 26px; flex: 0 0 auto; }
.cls-check label { margin: 0; font-weight: 600; }
.cls-form .cls-btn { margin-top: 12px; justify-self: start; }

.cls-reply { display: grid; gap: 4px; border-top: 2px solid var(--rule); padding-top: 12px; }
.cls-reply label { font-weight: 700; margin-top: 8px; display: block; }
.cls-reply textarea, .cls-reply input[type=text] { font: inherit; font-size: 17px; padding: 10px 12px; border: 2px solid var(--rule); border-radius: 10px; width: 100%; box-sizing: border-box; }
.cls-reply .cls-btn { justify-self: start; margin-top: 10px; }

.cls-msg { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--rule); font-weight: 600; }
.cls-msg.cls-bad { border-color: #8a1c1c; background: #fbeeee; color: #5c1010; }
.cls-msg.cls-bad::before { content: "Problem: "; font-weight: 800; }
.cls-msg.cls-ok { border-color: #1f5c2e; background: #eef8f0; color: #123d1e; }
.cls-msg.cls-ok::before { content: "Done: "; font-weight: 800; }

.cls-rules { margin: 0 0 18px; padding-left: 22px; max-width: 62ch; }
.cls-rules li { margin: 0 0 8px; }
.cls-draft { border: 3px solid #8a1c1c; background: #fbeeee; padding: 14px 16px; border-radius: 10px; }
input.cls-link { max-width: 640px; }

@media (min-width: 760px) { .cls-list { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }