/* Tasks and events. Buttons, panels, dropdown arrows and the .meter bar come from shared/base.css.
   Loaded after shared/base.css. */

/* Groups: a section each that opens and closes, showing how many are done and the next reset */
#groups{display:grid;gap:14px}
.group{background:var(--surface);border:3px solid var(--rim)}
.group::before{content:"";display:block;height:6px;background:var(--brand)}
.group>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 12px}
.group>summary:hover .g-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.g-name{font-weight:700;font-size:1.25rem;flex:1 1 8em}
.g-count{font-weight:700;font-size:.9rem;padding:0 6px;border:2px solid transparent}
.g-count.all{background:var(--brand);color:#121212;border-color:#121212}
.g-reset{flex-basis:100%;font-size:.85rem;color:var(--muted);padding-left:1em}
.group .items{padding:0 12px}
.g-buttons{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 12px}
.add-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* One row per task or event, with its buttons on the right */
.items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.item{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;background:var(--tile);border:2px solid var(--rim);padding:6px 10px}
.i-name{font-weight:600;overflow-wrap:anywhere}
.i-meta{display:block;font-size:.85rem;font-weight:400;color:var(--muted)}
.i-notes{display:block;font-size:.9rem;font-weight:400;white-space:pre-wrap;margin-top:4px}
.i-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
/* Done until the next reset: a gradient bar down the side, the name faded, and a filled Done button */
.item.done{background:var(--surface);padding-left:18px}
.item.done::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--brand-v)}
.item.done .i-name{opacity:.6;text-decoration:line-through;text-decoration-thickness:2px}
.mark[aria-pressed="true"]{background:var(--brand);color:#121212;border-color:#121212}
.mark[aria-pressed="true"]:hover{background:var(--tile);color:var(--ink);border-color:var(--rim)}
.counter{display:inline-flex;align-items:center;gap:6px}
.counter button{min-width:2.2em;padding:4px 8px}
.c-num{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-num .meter{width:60px}
.c-input{width:4.5em;font:inherit;font-weight:700;text-align:center;color:var(--ink);background:var(--tile);border:2px solid var(--rim);padding:2px 4px;-moz-appearance:textfield}
.c-input::-webkit-inner-spin-button,.c-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Events that have ended or were finished */
.ended{padding:10px 12px 0}
.ended>summary{display:flex;gap:6px;font-weight:700}
.ended .items{margin:6px 0 8px;padding:0}
.ended .item{background:var(--surface)}
.ended .i-name{color:var(--muted)}

/* The add and edit form */
#dialog{width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);background:var(--surface);color:var(--ink);border:3px solid var(--rim);padding:0 16px 16px}
#dialog::before{content:"";display:block;height:6px;margin:0 -16px 14px;background:var(--brand)}
#dialog::backdrop{background:rgb(0 0 0 / .55)}
#form h2{margin-bottom:12px}
.f-row{display:grid;gap:4px;margin-bottom:10px;font-weight:600}
.f-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#form input,#form select,#form textarea{width:100%;font:inherit;font-weight:400;color:var(--ink);background:var(--tile);border:2px solid var(--rim);padding:5px 8px}
#form textarea{resize:vertical}
/* Reset fields show only for the kinds of reset that use them */
.if-week,.if-month,.if-repeat{display:none}
#form[data-every="week"] .if-week,#form[data-every="month"] .if-month{display:grid}
#form:not([data-every="none"]) .if-repeat{display:grid}
#preview{font-weight:600}
.f-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.f-buttons .primary{background:var(--brand);color:#121212;border-color:#121212}
.f-buttons .primary:hover{background:var(--tile);color:var(--ink);border-color:var(--rim)}
.f-buttons .delete{margin-left:auto}

@media (max-width:560px){
  .item{grid-template-columns:1fr}
  .i-buttons{justify-content:flex-start}
  .f-pair{grid-template-columns:1fr}
}
@media print{.add-row,.i-buttons,.g-buttons{display:none}}