/* Erweiterung 3 (Agent A): list area - archive, action cards, copy preview.
   Builds on app.css variables (--c-*, --tap, --radius). Everything stays usable without this file
   (base classes .btn/.segmented/.seg/.toolbar/.cards/.card come from app.css). */

/* ---------- action cards */
.lst-actions-title { font-size: 1rem; margin: 0 0 .5rem; }
.lst-actioncards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.lst-actioncard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.lst-actioncard-btn { justify-content: flex-start; width: 100%; min-height: calc(var(--tap) + 8px); text-align: left; border-color: transparent; }
.lst-actioncard-btn:hover { border-color: var(--c-primary); }
.lst-actioncard-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-info-bg); color: var(--c-primary); font-size: 1.2rem; flex: none; }
.lst-actioncard-hint { margin: 0 .5rem .25rem; }
.lst-actioncard-title { overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* ---------- view switch, search, sort */
.lst-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-end; margin-bottom: .5rem; }
.lst-segment { border: 1px solid var(--c-border); border-radius: calc(var(--radius) + 2px); padding: .2rem; background: var(--c-surface); }
.lst-segment .seg { border-color: transparent; }
.lst-segment .seg[aria-pressed="true"] { border-color: var(--c-primary); }
.lst-toolbar { margin-bottom: 0; flex: 1 1 24rem; }
.lst-search { flex: 2 1 14rem; }
.lst-search input { width: 100%; min-height: var(--tap); }
.lst-sort { flex: 1 1 12rem; }
.lst-sort select { width: 100%; min-height: var(--tap); }
.lst-search .hint { margin: .2rem 0 0; }
.lst-count { margin: .25rem 0 .75rem; min-height: 1.5em; }

/* ---------- list cards */
.lst-card { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; }
.lst-card-done { background: var(--c-subtle); }
.lst-card .title-link { font-size: 1.1rem; font-weight: 700; display: inline-block; min-height: var(--tap); line-height: var(--tap); }
.lst-meta { margin: .1rem 0; font-size: .92rem; }
.lst-card-actions { margin-top: 0; }
.lst-more-row { justify-content: center; margin: 1rem 0; }

/* ---------- detail */
.lst-readonly .lst-choice-actions { align-items: stretch; }
.lst-choice-card { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 14rem; }
.lst-choice-card .hint { margin: 0; }
.lst-complete-row { margin: 1rem 0; justify-content: flex-end; }
.item-note { margin: .1rem 0 .25rem 2.25rem; font-size: .92rem; white-space: pre-wrap; }
.lst-add-form .field { flex: 1 1 8rem; }
.lst-add-form .field:first-child { flex: 3 1 14rem; }

/* ---------- copy preview */
.lst-choice { border: 1px solid var(--c-border); border-radius: var(--radius); padding: .5rem .75rem; }
.lst-choice legend { font-weight: 700; padding: 0 .25rem; }
.lst-radio { min-height: var(--tap); display: flex; align-items: center; gap: .5rem; }
.lst-radio input { width: 1.25rem; height: 1.25rem; }
.lst-copy-items { border-top: 1px solid var(--c-subtle); margin-top: .75rem; padding-top: .5rem; }
.lst-copy-items h3 { font-size: 1rem; margin: 0 0 .25rem; }
.lst-copy-date { margin: .25rem 0; }

/* ---------- smartphone: own arrangement, not a shrunken desktop */
@media (max-width: 600px) {
  .lst-actioncards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .lst-actioncard { padding: .25rem; }
  .lst-actioncard-btn { flex-direction: column; align-items: center; text-align: center; padding: .5rem .25rem; font-size: .9rem; line-height: 1.2; }
  .lst-actioncard-hint { display: none; }
  .lst-controls { flex-direction: column; align-items: stretch; gap: .5rem; }
  .lst-segment { display: grid; grid-template-columns: 1fr 1fr; }
  .lst-segment .seg { width: 100%; padding: .5rem .25rem; font-size: .92rem; }
  .lst-toolbar { flex-direction: column; align-items: stretch; gap: .5rem; flex: none; }
  .lst-search, .lst-sort { flex: none; }
  .lst-search .hint { display: none; }
  .lst-cards { grid-template-columns: 1fr; }
  .lst-card-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .lst-card-actions .btn { width: 100%; }
  .lst-choice-actions { flex-direction: column; }
  .lst-choice-card { flex: none; }
  .lst-choice-card .btn { width: 100%; }
  .lst-complete-row .btn { width: 100%; }
  .lst-add-form .field, .lst-add-form .field:first-child { flex: 1 1 100%; }
  .lst-add-form .actions .btn { width: 100%; }
  .item-note { margin-left: 2rem; }
}