/* Tasks — styles
 *
 * Phone first. Body text is 1.2rem (about 19px); smaller sizes only for
 * genuinely secondary text (the detail line under a task, hints).
 * Tap targets are at least 44px.
 */

:root {
    --ink:       #1d2a33;
    --ink-soft:  #5d6b75;
    --line:      #dcd8d0;
    --paper:     #ffffff;
    --bg:        #f5f3ef;
    --brand:     #2f4858;
    --accent:    #2a7f62;
    --late:      #a33a26;
    --radius:    12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}

a { color: var(--brand); }
h1 { font-size: 1.6rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

.wrap { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.narrow { max-width: 26rem; margin: 2rem auto; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ chrome */

.topbar {
    position: sticky; top: 0; z-index: 5;
    background: var(--brand);
    padding: 0 0.5rem;
    padding-top: env(safe-area-inset-top);
}
.topbar nav { display: flex; max-width: 44rem; margin: 0 auto; }
.topbar a {
    flex: 1; text-align: center;
    color: #fff; text-decoration: none;
    padding: 0.8rem 0.25rem;
    border-bottom: 3px solid transparent;
}
.topbar a[aria-current="page"] { border-bottom-color: #fff; font-weight: 600; }

.footer { text-align: center; font-size: 1rem; color: var(--ink-soft); padding: 1rem 1rem 2rem; }
.footer a { color: var(--ink-soft); }

/* ------------------------------------------------------------------- forms */

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=date], select, textarea {
    font: inherit;
    width: 100%;
    padding: 0.6rem 0.75rem;
    min-height: 2.9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}
textarea { min-height: 6rem; }

button, .button-plain {
    font: inherit;
    font-weight: 600;
    min-height: 2.9rem;
    padding: 0.5rem 1.2rem;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}
button.secondary { background: #e7e3db; color: var(--ink); }
button.danger    { background: transparent; color: var(--late); border: 1px solid var(--late); }
button.small     { min-height: 2.4rem; padding: 0.3rem 0.8rem; font-size: 1rem; }
.button-plain    { background: transparent; color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
.stack label.check { flex-direction: row; align-items: center; gap: 0.6rem; }
.stack label.check input { width: 1.4rem; height: 1.4rem; }
.buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.inline-form { display: flex; gap: 0.5rem; margin: 1rem 0; }
.inline-form input { flex: 1; }
form.inline { display: inline; }

.hint { font-weight: 400; font-size: 1rem; color: var(--ink-soft); }
.meta { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.error { background: #fbe9e6; color: var(--late); padding: 0.75rem 1rem; border-radius: var(--radius); }
.delete-form { margin-top: 2.5rem; }

/* -------------------------------------------------------------- quick add */

.quick-add {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.quick-add > input { border: 0; padding-left: 0.25rem; font-size: 1.2rem; }
.quick-add > input:focus { outline: none; }
.quick-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.quick-add-row select, .quick-add-row input[type=date] { flex: 1 1 8rem; width: auto; }

/* ------------------------------------------------------------------ tasks */

.task-group h2 { display: flex; align-items: center; gap: 0.5rem; }
.count {
    font-size: 0.95rem; font-weight: 600;
    color: var(--ink-soft);
    background: #e7e3db; border-radius: 999px; padding: 0 0.55rem;
}
.late-group h2 { color: var(--late); }
.quiet-group h2, .done-group h2 { color: var(--ink-soft); }

ul.tasks {
    list-style: none; margin: 0; padding: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.task {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--line);
}
.task:first-child { border-top: 0; }

/* The big round tick. 44px tap area around a 28px circle. */
.tick {
    flex: none;
    width: 2.75rem; height: 2.75rem;
    margin: -0.4rem -0.3rem -0.4rem -0.5rem;
    padding: 0; min-height: 0;
    background: transparent; border: 0; border-radius: 50%;
    position: relative;
}
.tick::before {
    content: "";
    position: absolute; inset: 0.4rem;
    border: 2.5px solid #9aa5ad;
    border-radius: 50%;
    transition: background 0.15s, border-color 0.15s;
}
.tick[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }
.tick[aria-pressed="true"]::after {
    content: "";
    position: absolute; left: 1.05rem; top: 0.75rem;
    width: 0.45rem; height: 0.85rem;
    border: solid #fff; border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.tick.is-saving { opacity: 0.5; }

.task-body { flex: 1; min-width: 0; padding-top: 0.15rem; }
.task-title { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.task-actions { display: flex; gap: 0.5rem; margin-top: 0.35rem; flex-wrap: wrap; }
.task-link {
    font-size: 0.95rem; font-weight: 600; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center;
    min-height: 2.25rem; padding: 0 0.8rem;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--brand); background: #faf9f6;
}
.task-link.ask { color: #9a4a2a; border-color: #e6c9bb; background: #fbf1ec; }
.task-meta { font-size: 0.95rem; color: var(--ink-soft); }
.task-meta .late { color: var(--late); font-weight: 600; }
.task.is-done .task-title { color: var(--ink-soft); text-decoration: line-through; }

.all-clear { color: var(--ink-soft); }

/* ------------------------------------------------------------------ brief */

details.brief {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
details.brief summary { font-weight: 700; cursor: pointer; min-height: 2rem; }
.brief-body h2, .brief-body h3, .brief-body h4 { font-size: 1.1rem; margin: 1rem 0 0.3rem; }
.brief-body ul, .brief-body ol { padding-left: 1.3rem; margin: 0.3rem 0; }
.brief-body li { margin: 0.25rem 0; }
.brief-body p { margin: 0.5rem 0; }

/* ------------------------------------------------------------------ lists */

ul.lists {
    list-style: none; margin: 0; padding: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
ul.lists li {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--line);
}
ul.lists li:first-child { border-top: 0; }
ul.lists a { font-weight: 600; text-decoration: none; }

details.archived, details.done-list, details.list-settings { margin-top: 1.5rem; }
details > summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; padding: 0.4rem 0; }
.list-settings form { margin: 0.75rem 0; }
.badge { font-size: 0.9rem; background: #e7e3db; color: var(--ink-soft); border-radius: 999px; padding: 0.1rem 0.6rem; vertical-align: middle; }

code.copy { display: block; padding: 0.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; user-select: all; }