/* Implementation checklists: checkbox rows with a description and a comment. */
.clist{border-top:1px solid var(--line);margin-top:6px}
.crow{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:12px 6px;border-bottom:1px solid var(--line)}
.crow:hover{background:rgba(var(--ink-rgb),.025)}
.cbox{padding:0;width:20px;height:20px;margin-top:1px;border:1.5px solid rgba(var(--ink-rgb),.3);border-radius:4px;background:var(--surface);color:#fff;font-size:13px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .12s,border-color .12s}
.cbox:hover{border-color:var(--accent)}
.crow.done .cbox{background:var(--accent);border-color:var(--accent)}
.ctext{font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crow.done .ctitle{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(var(--ink-rgb),.3)}
.ctext .qnote-btn{margin-left:auto}
.crow:hover .qnote-btn{opacity:1}
.cdesc{font-size:13px;color:var(--faint);margin-top:1px}
.caudit{font-size:11.5px;font-weight:400;padding:0 6px;border-radius:3px;text-decoration:none;display:inline-block}
.caudit.yes{background:var(--tag-green);color:var(--ok)}
.caudit.no{background:var(--tag-red);color:var(--tag-red-ink)}
.caudit.unsure{background:var(--tag-yellow);color:var(--tag-yellow-ink)}
.ccomment{width:100%;margin-top:6px;border:0;border-radius:4px;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);padding:4px 6px;margin-left:-6px;outline:none}
.ccomment:hover{background:var(--hover)}
.ccomment:focus{background:var(--surface);box-shadow:0 0 0 2px var(--accent-soft)}
.ccomment::placeholder{color:var(--faint)}
.ccomment:placeholder-shown{display:none}
.crow.noting .ccomment{display:block}

/* lesson links */
.lesson{font-size:12.5px;font-weight:400;color:var(--faint);text-decoration:none;padding:1px 6px;border-radius:4px;margin-left:8px}
.lesson:hover{background:var(--hover);color:var(--accent)}
.crow.done .lesson{text-decoration:none}
.cbox svg{display:block;opacity:0}
.crow.done .cbox svg{opacity:1}

/* Setup card above a checklist (Environments), and labeled fields inside fill-ins (Landing Zone) */
.setup-card{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 18px;background:var(--surface)}
.setup-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.setup-q{font-weight:500}
.setup-field{display:flex;align-items:center;gap:10px;font-size:14px}
.setup-field input{width:140px;font:13px var(--mono);border:1px solid var(--line);border-radius:5px;padding:4px 8px}
.setup-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* fill-in items: the box ticks itself from the answers (a click still overrides) */
.cfill{margin-top:8px;font-size:14px}
.cfill code{font:12.5px var(--mono)}
.cfill-q{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cfill-row{margin-top:8px}
.cfill-note{margin-top:6px}
.cfill-grid{display:grid;grid-template-columns:max-content 200px;gap:6px 14px;align-items:center}
.cfill-in{font:13px var(--mono);border:1px solid var(--line);border-radius:5px;padding:4px 8px}
.cfill-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cfill-bad{color:var(--amber)}
.crow.done .cfill{opacity:.85}
.cfill-grid.sched{grid-template-columns:max-content max-content 160px}
.cfill-grid.roles{grid-template-columns:minmax(max-content,90px) minmax(0,460px)}
.cfill-grid.roles .role-name{display:flex;align-items:center;gap:4px}
.cfill-grid.roles .role-sep{grid-column:1 / -1;border-top:1px dashed var(--line);margin:6px 0}   /* between roles for the same job */
.cfill-grid.roles .cfill-in{width:200px;max-width:100%}
.cfill-grid.roles .cfill-in.cfill-desc{width:100%;font-family:inherit}
.cfill-grid.wide{grid-template-columns:minmax(max-content,130px) minmax(0,max-content)}
.cfill-grid.wide .cfill-in{width:320px;max-width:100%}
.cfill-grid .seg{justify-self:start}
.cfill-with{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
.cfill .addbtn{margin-top:6px}

/* Workflow → Access: the read/write matrix */
.access-card{border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:0;background:var(--surface);overflow-x:auto}
.access-card .hint{font-size:13.5px}
.access-tbl{border-collapse:collapse;margin-top:16px;width:100%;font-size:15px}
.access-tbl th,.access-tbl td{padding:8px 6px;text-align:center;white-space:nowrap}
.access-tbl thead th{font-weight:600;vertical-align:bottom}
.access-tbl thead code{display:block;margin-top:2px;font:13px var(--mono);color:var(--muted);font-weight:400}
.access-tbl tbody th{text-align:left;font:14.5px var(--mono);font-weight:500;padding-right:20px;width:1%}
.access-tbl tbody tr+tr{border-top:1px solid var(--line)}
.access-tbl .prod-hd{border-bottom:1px solid var(--line);padding-bottom:6px}
.access-tbl .prod-sub{padding-top:6px}
.access-tbl .prod-sub code{display:inline;color:var(--ink);font-size:13.5px}
.acell{width:100%;min-width:76px;height:38px;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:0 10px;font-size:14px;font-weight:500;cursor:pointer}
.acell:hover{border-color:var(--accent)}
.acell.rec{color:var(--faint);font-weight:400;border-style:dashed}
.acell.read{background:var(--accent-soft);border-color:transparent}
.acell.write{background:var(--accent);color:#fff;border-color:transparent}
.acell.none{color:var(--muted)}