/* To-do lists, printable checklists, Eisenhower matrix, trackers (src/todo.js, public/todo/*.js). On top of /labels/labels.css. */
#td [hidden], #sorter [hidden] { display: none !important; }
.pad { width: 66px; height: 80px; margin: 0 auto 12px; position: relative; background: #fff; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 0 0 1px var(--line); }
.pad i { position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px 6px 0 0; background: var(--navy); }
.pad b { position: absolute; left: 24px; right: 10px; height: 2.5px; border-radius: 2px; background: #c9ced6; }
.pad b::before { content: ""; position: absolute; left: -15px; top: -4px; width: 9px; height: 9px; border: 1.6px solid var(--navy); border-radius: 2px; background: #fff; }
.pad b:nth-of-type(1) { top: 28px; } .pad b:nth-of-type(2) { top: 44px; } .pad b:nth-of-type(3) { top: 60px; right: 22px; }
.pad b:nth-of-type(1)::after { content: ""; position: absolute; left: -13px; top: -4px; width: 4px; height: 7px; border: solid var(--red); border-width: 0 2px 2px 0; transform: rotate(40deg); }

.td-ed input:not([type]), .td-ed input[type=date], .td-ed input[type=month], .td-ed textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 2px solid #e5e7eb; border-radius: 9px; font-size: 15px; font-family: inherit; background: #fff; color: #111; }
.td-ed textarea { font: 14.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; background: #fdfdfb; }
.td-ed input:focus, .td-ed textarea:focus { outline: none; border-color: var(--navy); }
.td-ed .opt-full .muted { font-weight: 500; font-size: 12.5px; }
.td-ed .hint { margin-top: 4px; font-size: 12.5px; }
.opts .span2 { grid-column: 1 / -1; }
.extras { font-size: 13px; font-weight: 650; color: #374151; }
.extras .chips { display: flex; flex-wrap: wrap; gap: 2px 16px; }
#td-info { font-size: 14px; color: #374151; margin: 10px 2px 0; }
#td-warn { list-style: none; margin: 10px 0 0 !important; padding: 10px 12px; background: #fff4f2; border: 1px solid #f3c2bd; border-radius: 10px; }
#td-warn li { font-size: 14px !important; color: #7f1d1d; margin: 2px 0 !important; }

.between { text-align: center; font-size: 20px; font-weight: 750; color: var(--ink); margin: 6px 0 12px; }
.online { border: 2px solid #dbe3ef; }
.onl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.onl .mini { list-style: none; margin: 4px 0 0 !important; }
.onl .mini li { font-size: 14.5px !important; color: var(--ok); font-weight: 600; }
.onl .mini li::before { content: "✓ "; }
.onl form label { display: block; font-size: 13px; font-weight: 650; color: #374151; margin-bottom: 10px; }
.onl form input, .onl form textarea { display: block; width: 100%; margin-top: 4px; padding: 10px 11px; border: 2px solid #e5e7eb; border-radius: 9px; font-size: 16px; font-family: inherit; color: #111; background: #fff; }
.onl form textarea { resize: vertical; line-height: 1.45; }
.onl form input:focus, .onl form textarea:focus { outline: none; border-color: var(--navy); }
.onl form .btn { width: 100%; }

.tdgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tdcard { display: block; border: 2px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); background: #fff; }
.tdcard:hover { border-color: var(--navy); }
.tdcard.here { border-color: var(--red); background: #fffaf9; }
.tdcard b { display: block; font-size: 15px; color: var(--navy); }
.tdcard span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }

.tplgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tpl { border: 2px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; }
.tpl h3 { margin: 0 0 2px !important; font-size: 16px !important; color: var(--navy) !important; }
.tpl .muted { font-size: 13px; line-height: 1.45; margin-bottom: 8px !important; }
.tpl ul { list-style: none; margin: 0 0 10px !important; }
.tpl li { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 !important; padding-left: 18px; position: relative; }
.tpl li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border: 1.5px solid var(--navy); border-radius: 2px; }
.tpl li.h { padding-left: 0; font-weight: 750; font-size: 11.5px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin-top: 6px !important; }
.tpl li.h::before { display: none; }
.tpl details { margin-bottom: 10px; }
.tpl summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--navy); margin-bottom: 6px; }
.tpl .btn { margin-top: auto; align-self: flex-start; }

.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.q { border-radius: 12px; padding: 12px 14px; }
.q b { display: block; font-size: 15.5px; color: var(--navy); }
.q span { display: block; font-size: 12.5px; color: #4b5563; margin-bottom: 4px; }
.q p { font-size: 14px !important; line-height: 1.5 !important; margin: 0 !important; }
.q1 { background: #d5dbe4; } .q2 { background: #e0e5ec; } .q3 { background: #e8ebf0; } .q4 { background: #f1f3f6; }
.board ol { margin: 6px 0 0 18px !important; }
.board li { font-size: 14px !important; margin: 0 0 2px !important; }

#sorter textarea { display: block; width: 100%; padding: 10px 11px; border: 2px solid #e5e7eb; border-radius: 9px; font: 15px/1.45 inherit; font-family: inherit; color: #111; background: #fdfdfb; resize: vertical; margin-top: 8px; }
#sorter textarea:focus { outline: none; border-color: var(--navy); }
#so-card { text-align: center; padding: 18px 10px 8px; border: 2px dashed #d6dbe4; border-radius: 14px; margin-top: 10px; }
.so-n { font-size: 12.5px !important; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px !important; }
.so-task { font-size: 21px !important; font-weight: 750; color: var(--ink); line-height: 1.3 !important; margin-bottom: 10px !important; }
.so-q { font-size: 18px !important; font-weight: 700; color: var(--navy); margin-bottom: 2px !important; }
.so-help { margin-bottom: 10px !important; }
.so-btns { justify-content: center; }
.so-btns .btn:not(.small) { min-width: 110px; }

@media (max-width: 820px) {
  .tdgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onl { grid-template-columns: 1fr; }
  #td .tool > div:last-child { order: -1; }
  #td .sheet { padding: 10px; position: static; }
}
@media (max-width: 480px) {
  .tplgrid, .qgrid { grid-template-columns: 1fr; }
  .tdgrid { grid-template-columns: 1fr 1fr; }
}
.panel a.btn { color: #fff; } .panel a.btn.ghost { color: var(--navy); }
.tpljump { text-align: center; margin: -6px 0 16px; font-size: 15px; font-weight: 650; }
.tpljump a { color: var(--navy); }