/* Tend · the behaviour toolkit: plan (WOOP), friction, trigger map, relapse plan, automaticity, risky days, help resources. */

.tk-card .card-title h3 { display: flex; align-items: center; gap: 8px; }
.tk-why { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--ink-3); }
.tk-why:hover { color: var(--accent); }
.tk-line { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.tk-line:first-child { border-top: 0; }
.tk-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html[lang="ar"] .tk-l { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.tk-v { overflow-wrap: anywhere; }
@media (max-width: 520px) { .tk-line { grid-template-columns: minmax(0, 1fr); } }

/* WOOP: four steps with their letter */
.woop { display: grid; gap: 10px; margin-bottom: 6px; }
.woop-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.woop-row > div { overflow-wrap: anywhere; }
.woop-k { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; background: color-mix(in srgb, var(--hc, var(--accent)) 16%, transparent); color: var(--hc, var(--accent)); }
.woop-box { border: 1px dashed var(--line-2); border-radius: 14px; padding: 10px 14px; }
.woop-box > summary { cursor: pointer; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; }
.woop-box > summary::-webkit-details-marker { display: none; }
.woop-box[open] > summary { margin-bottom: 8px; }

/* friction checklist */
.tk-checks { display: grid; gap: 6px; }
.tk-check { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.tk-check input { accent-color: var(--hc, var(--accent)); width: 17px; height: 17px; flex: none; }
.tk-check span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tk-check.done span { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.tk-check .icon-btn { width: 28px; height: 28px; flex: none; opacity: .6; }
.tk-check .icon-btn:hover { opacity: 1; }

/* trigger map and value tags */
.tk-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .tk-map { grid-template-columns: minmax(0, 1fr); } }
.tk-kind .tk-l { margin-bottom: 6px; }
.tk-tag { gap: 4px; padding: 4px 6px 4px 10px; max-width: 100%; overflow-wrap: anywhere; }
.tk-tag button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--ink-3); flex: none; }
.tk-tag button:hover { background: var(--surface-3); color: var(--ink); }
.tk-tag-in { width: 130px; max-width: 100%; padding: 5px 10px; font-size: 13px; border-radius: 999px; }

/* recorded facts vs our reading */
.tk-fact { display: grid; gap: 4px; justify-items: start; padding: 8px 0; }
.tk-fact + .tk-fact { border-top: 1px solid var(--line); }
.tk-risk { color: var(--warn); margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.tk-spark { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: 10px; }
.tk-spark i { flex: 1; max-width: 18px; min-height: 3px; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--hc, var(--accent)) 70%, transparent); }

/* SRBAI questions */
.srbai-q { padding: 10px 0; border-top: 1px solid var(--line); }
.srbai-q:first-of-type { border-top: 0; }
.srbai-scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.srbai-scale button { height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 700; color: var(--ink-2); }
.srbai-scale button:hover { border-color: var(--ink-3); color: var(--ink); }
.srbai-scale button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* values resurfaced, kind lines */
.values-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-rose) 10%, transparent); margin-bottom: 12px; }
.values-note > .ic { color: var(--c-rose); margin-top: 3px; flex: none; }
.values-note > div { min-width: 0; overflow-wrap: anywhere; }
.kind-line { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.kind-line .ic { color: var(--c-rose); margin-top: 2px; flex: none; }

/* help resources */
.help-card { border-color: color-mix(in srgb, var(--c-rose) 30%, var(--line)); }
.help-list { display: grid; margin-top: 6px; }
.help-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.help-row:first-child { border-top: 0; }
.help-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sci-help { max-width: 980px; }

/* Settings → Account: the ID, the username, two-step sign-in */
.acct-id { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 28px; margin-bottom: 14px; }
.acct-code { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.acct-user { font-size: 17px; font-weight: 600; margin: 4px 0; }
.acct-rename { padding-top: 14px; border-top: 1px solid var(--line); }
.acct-steps { margin: 0 0 10px; padding-inline-start: 20px; display: grid; gap: 4px; color: var(--ink-2); }
/* phones: the small remove buttons and checkboxes are at least 24 px to tap */
@media (max-width: 760px) { .tk-tag button { width: 24px; height: 24px; } .tk-check input { width: 24px; height: 24px; } }