list archive

static/style.css

@@ -71,6 +71,8 @@ h3 { margin-bottom: 6px; font-size: 1rem; }
 .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 22px; align-items: start; }
 .panel { padding: 26px; border: 1px solid rgba(221, 225, 210, .9); border-radius: 24px; background: rgba(255, 253, 248, .88); box-shadow: var(--shadow); }
 .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
+.archive-link { margin-left: auto; color: var(--muted); font-size: .78rem; font-weight: 700; text-decoration: none; }
+.archive-link:hover { color: var(--deep-sage); }
 .count-badge { display: inline-grid; place-items: center; min-width: 27px; height: 27px; padding: 0 8px; border-radius: 99px; color: var(--deep-sage); background: #e8f0e1; font-size: .78rem; font-weight: 800; }
 .stack { display: grid; gap: 9px; }
 .stack label { color: var(--muted); font-size: .82rem; font-weight: 700; }
@@ -100,6 +102,11 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .list-card-copy { display: grid; flex: 1; gap: 2px; }
 .list-card-copy small { color: var(--muted); font-size: .75rem; }
 .list-card-arrow { color: var(--muted); font-size: 1.25rem; }
+.archived-list-card { opacity: .72; }
+.archived-list-card .list-card-icon { color: var(--muted); background: #eef0ea; }
+.archived-list-card .list-card-copy { align-items: flex-start; }
+.archived-list-card form { margin-left: auto; }
+.archived-banner { margin-bottom: 18px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #f1f3ec; font-size: .82rem; font-weight: 700; }
 .empty-state { padding: 35px 18px 24px; text-align: center; color: var(--muted); }
 .empty-mark { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 15px; border-radius: 18px; color: var(--deep-sage); background: #edf3e8; font-size: 1.8rem; }
 .empty-state h3 { color: var(--ink); }
@@ -152,6 +159,8 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .check-form { flex: 0 0 auto; }
 .check-button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid #c8d6c1; border-radius: 9px; color: #fff; background: transparent; cursor: pointer; font-size: .88rem; font-weight: 900; }
 .is-checked .check-button { border-color: var(--deep-sage); background: var(--deep-sage); }
+.check-button-static { cursor: default; }
+.is-checked .check-button-static { border-color: var(--deep-sage); background: var(--deep-sage); }
 .item-copy { display: grid; grid-template-columns: auto 1fr; flex: 1; min-width: 0; gap: 2px 7px; align-items: baseline; }
 .item-copy strong { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .item-qty { grid-column: 1; grid-row: 1; color: var(--muted); font-weight: 700; white-space: nowrap; }