/* Components: summary tiles, collapsible cards, day dialog and topic chips. */

/* Summary tiles */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.tile .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tile .v{font-family:var(--display);font-size:1.25rem;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .s{font-size:.8rem;color:var(--muted)}
.tile .s.ok{color:var(--ok)} .tile .s.bad{color:var(--danger)}
@media (max-width:520px){.strip{grid-template-columns:1fr 1fr}}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.card-compact{padding:10px 14px}
details.card>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
details[open].card>summary::after{content:"–"}
details.card>summary+*{margin-top:12px}
section.card>h2{margin-bottom:12px}
@media (prefers-reduced-motion:no-preference){details.card>summary+*{animation:fade .15s ease-out}}
@keyframes fade{from{opacity:.4}to{opacity:1}}

/* Day edit dialog */
dialog.dlg{border:0;border-radius:14px;padding:0;width:min(92vw,440px);background:var(--panel);color:var(--fg);box-shadow:0 12px 40px rgba(0,0,0,.25)}
dialog.dlg::backdrop{background:rgba(0,0,0,.45)}
.dlg-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dlg-close{padding:5px 10px;font-weight:500}
.dlg-body h3{font-family:var(--display);font-weight:600;font-size:.9rem;margin:4px 0 0;color:var(--muted)}
.dlg-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.dlg-item.removed span{color:var(--muted);text-decoration:line-through}
.dlg-x{padding:4px 9px;font-size:.85rem;font-weight:500}
.dlg-btns{margin-top:4px}

/* Topic chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:.85rem;cursor:pointer;user-select:none;background:var(--bg)}
.chip input{width:auto;margin:0}
.chip b{font-weight:500}
.chip .title{font-family:var(--body);font-size:.8rem;color:var(--muted);max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.cur .title,.chip.late .title{color:inherit;opacity:.85}
.topic-list{margin:10px 0 0;padding-left:2.4em;font-size:.9rem}
.topic-list li{margin:3px 0;padding-left:4px}
.topic-list li::marker{font-family:var(--mono);color:var(--muted)}
.chip.done{background:var(--review);color:var(--review-ink);border-color:transparent;text-decoration:line-through}
.chip.cur{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.chip.late{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}

/* Install instructions (hidden once the app runs installed) */
.install-steps{margin:10px 0 0;padding-left:1.2em;font-size:.9rem}
.install-steps li{margin:4px 0}
@media (display-mode: standalone){#installCard{display:none}}