/* Tasks app (My Start Hub). Standalone: does not use the tracker's styles.css. Green/teal scheme. */
:root {
  --bg: #eef6f3; --card: #fff; --ink: #14302a; --muted: #5b7470; --line: #d3e5df;
  --brand: #0f5c4d; --accent: #17866f; --ok: #1e7d4f; --warn: #a65f00; --bad: #b3261e; --r: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
.tk-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top)); background: var(--brand); color: #fff; }
.tk-home { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: .3rem .8rem; font-size: .9rem; }
.tk-title { margin: 0; font-size: 1.2rem; flex: 1; }
.tk-count { font-size: .85rem; opacity: .85; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
.tk-muted { color: var(--muted); }
.tk-hint { color: var(--muted); font-size: .85rem; margin-top: 1.5rem; }
button { font: inherit; font-size: .95rem; min-height: 42px; padding: .45rem .9rem; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
button.tk-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.tk-ghost { background: transparent; }
button:disabled { opacity: .6; }
input, select, textarea { font: inherit; font-size: 16px; width: 100%; padding: .55rem .6rem; border: 1px solid #b9d3cb; border-radius: 10px; background: #fff; color: var(--ink); }
label { display: grid; gap: .2rem; font-size: .88rem; color: var(--muted); }
.tk-add-btn { width: 100%; background: var(--accent); color: #fff; border: 0; font-weight: 600; }
.tk-group { margin: 1.4rem 0 .5rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); font-weight: 700; display: flex; gap: .4rem; align-items: center; }
.tk-group.overdue { color: var(--bad); } .tk-group.today { color: var(--warn); }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tk-card { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--r); padding: .8rem .9rem; }
.tk-card.overdue { border-left-color: var(--bad); } .tk-card.today { border-left-color: var(--warn); }
.tk-card.done { border-left-color: #a9bdb8; opacity: .85; } .tk-card.done .tk-name { text-decoration: line-through; color: var(--muted); }
.tk-head { display: flex; gap: .4rem .6rem; flex-wrap: wrap; align-items: baseline; }
.tk-name { flex: 1 1 12rem; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.tk-badge { font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; background: #dff0ea; color: var(--brand); white-space: nowrap; }
.tk-badge.bad { background: #fbe5e3; color: var(--bad); } .tk-badge.warn { background: #fdf0dc; color: var(--warn); } .tk-badge.ok { background: #e3f3ea; color: var(--ok); }
.tk-details { margin: .35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-notes { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.tk-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.tk-form { display: grid; gap: .55rem; }
.tk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tk-comments { margin-top: .6rem; } .tk-comments > summary { cursor: pointer; color: var(--accent); font-size: .9rem; padding: .25rem 0; }
.tk-thread { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .35rem; }
.tk-c { padding: .45rem .65rem; border-radius: 10px; background: #f1f5f4; margin-right: 1.5rem; }
.tk-c.bot { background: #dff0ea; margin: 0 0 0 1.5rem; }
.tk-c-meta { font-size: .78rem; color: var(--muted); } .tk-c-text { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-cform { display: flex; gap: .4rem; align-items: flex-end; } .tk-cform textarea { flex: 1; }
.tk-done-section { margin-top: 1.6rem; } .tk-done-section > summary { cursor: pointer; color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .5rem 0; font-weight: 700; }
.tk-toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 10px; max-width: 90vw; }
.tk-toast.bad { background: var(--bad); }
@media (max-width: 600px) {
  main { padding: .75rem; } .tk-row2 { grid-template-columns: 1fr; }
  .tk-actions button { flex: 1 1 auto; }
}
/* 2026-10-16: list tabs + drive/location tags */
.tk-badge.tag { background: #eef1f6; color: #3a4a63; }
.tk-badge.tag.work { background: #e8e3f6; color: #4b3a8a; }
.tk-tabs { display: flex; gap: .4rem; margin: 0 0 .8rem; }
.tk-tab { border: 1px solid #c9d6d1; background: #fff; border-radius: 999px; padding: .3rem .9rem; cursor: pointer; font: inherit; }
.tk-tab.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.tk-drive { border: 1px solid #d8e2de; border-radius: 8px; padding: .3rem .6rem; margin: 0; }
.tk-drive legend { font-size: .85rem; padding: 0 .2rem; }
.tk-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .3rem; margin-right: .8rem; }