/* 仕事の進め方。style.css と flow.css の上に重ねる（○ は緑、✕ は赤、忘れやすい作業は橙、AI は紫） */
.wsub { margin: 20px 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hint { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; color: #475569; background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 999px; padding: 0 8px; white-space: nowrap; vertical-align: 2px; }
.fhead h2 .hint { margin-left: 6px; vertical-align: 3px; }
.sref { font-size: 11.5px; color: var(--muted); }
.sref a, .wk a { color: #1d4ed8; }
.inl { font-size: 12px; font-weight: 700; color: #1d4ed8; }
.wk { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 12.5px; color: var(--ink2); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wk h3 { margin: 0; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.wk p { margin: 0; }
.tipline { margin: 0; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; }
.wk .foot2 { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }

/* ---- チケット ---- */
.tkstory { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; margin-bottom: 12px; }
.tkstory .lab { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sfmt { display: flex; flex-wrap: wrap; gap: 6px; }
.sp { font-size: 13.5px; font-weight: 700; border-radius: 8px; padding: 3px 10px; }
.sp.who, .sex .who { background: #dbeafe; color: #1e3a8a; }
.sp.want, .sex .want { background: #dcfce7; color: #14532d; }
.sp.why, .sex .why { background: #fef3c7; color: #78350f; }
.sex { margin: 0; font-size: 14px; }
.sex mark { border-radius: 4px; padding: 1px 4px; }
.tkstory .snote { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink2); }
.tkcmp { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.tk { padding: 0; overflow: hidden; }
.tkh { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.tkh .mk { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.tk.bad .mk { background: #dc2626; }
.tk.good .mk { background: #16a34a; }
.tkh .no { font-family: var(--latin); font-size: 12px; color: var(--muted); }
.tkh h3 { margin: 0; font-size: 14.5px; min-width: 0; }
.tkb { padding: 12px 14px; font-size: 13.5px; }
.tkmiss { margin: 0 14px 14px; background: #fef2f2; color: #7f1d1d; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.tkmiss b { display: block; font-size: 11px; }
.tkmiss ul { margin: 2px 0 0; padding-left: 1.2em; }
.tkrows { margin: 0; display: grid; grid-template-columns: 10.5em minmax(0, 1fr); }
.tkrows dt, .tkrows dd { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line2); font-size: 13px; }
.tkrows dt:first-of-type, .tkrows dt:first-of-type + dd { border-top: 0; }
.tkrows dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.tkrows ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tkrows li { position: relative; padding-left: 20px; }
.tkrows li::before { content: ""; position: absolute; left: 0; top: .38em; width: 11px; height: 11px; border: 1.5px solid #16a34a; border-radius: 3px; }
.tkq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: q; }
.tkq li { counter-increment: q; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; color: var(--ink2); min-width: 0; }
.tkq b { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.tkq b::before { content: counter(q); flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--k-design); color: #fff; font-family: var(--latin); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.tkfoot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.tkfoot h3 { margin: 0 0 8px; font-size: 14.5px; }
.tkask ul { margin: 0; padding-left: 1.2em; font-size: 13px; display: grid; gap: 3px; }
.tknote { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); }
.tkac .say + .say { margin-top: 6px; }
.tkac p { margin: 8px 0 0; font-size: 12.5px; color: var(--ink2); }

/* ✕ と ○ */
.say { border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.say small { display: block; font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.say em { display: block; font-style: normal; font-size: 12.5px; margin-top: 6px; }
.say.bad { background: #fef2f2; color: #7f1d1d; }
.say.good { background: #f0fdf4; color: #14532d; }

/* ---- 見積もり ---- */
.estips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.estlab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.etopic { background: var(--line2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink2); }
.etopic b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }
.egut { margin: 12px 0 4px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.egut b { font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg button { appearance: none; border: 0; border-left: 1px solid var(--line); background: transparent; padding: 5px 13px; font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: #b91c1c; color: #fff; }
.egroup h4 { margin: 12px 0 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.egroup h4 i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.egroup.base { --c: #2563eb; }
.egroup.fg { --c: #d97706; }
.etasks { display: grid; gap: 5px; }
.etask { appearance: none; font: inherit; font-size: 13px; text-align: left; color: var(--ink); display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 7px 10px; cursor: pointer; }
.etask::before { content: ""; width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid #94a3b8; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.etask:hover { border-color: #94a3b8; }
.etask[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, white); }
.etask[aria-pressed="true"]::before { content: "✓"; background: var(--c); border-color: var(--c); }
.etask .hr { font-family: var(--latin); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ebtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pill { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.pill:hover { border-color: #94a3b8; color: var(--ink); }
.estout { display: grid; gap: 12px; }
.emini { display: none; }
.enums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.enum { background: var(--line2); border-radius: 10px; padding: 8px 11px; min-width: 0; }
.enum small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.enum b { font-family: var(--latin); font-size: 24px; font-weight: 600; line-height: 1.25; }
.enum span { font-size: 12px; font-weight: 700; margin-left: 3px; }
.enum em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink2); overflow-wrap: anywhere; }
.echart { position: relative; padding-top: 24px; }
.estack { position: relative; display: flex; height: 28px; border-radius: 7px; background: var(--line2); overflow: hidden; }
.estack i { flex: none; height: 100%; background: var(--c); box-shadow: inset -2px 0 0 #fff; }
.estack i.base { --c: #3b82f6; }
.estack i.fg { --c: #f59e0b; }
.estack::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(15, 23, 42, .16) calc(12.5% - 1px) 12.5%); }
.emark { position: absolute; top: 0; bottom: 34px; border-left: 2px dashed #b91c1c; pointer-events: none; }
.emark span { position: absolute; top: 0; left: 5px; font-size: 11px; font-weight: 700; color: #b91c1c; white-space: nowrap; }
.emark.flip span { left: auto; right: 5px; }
.ewhisk { position: relative; height: 16px; margin-top: 4px; }
.ewhisk .rg { position: absolute; top: 7px; height: 2px; background: var(--ink2); }
.ewhisk .rg::before, .ewhisk .rg::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; background: var(--ink2); }
.ewhisk .rg::before { left: 0; }
.ewhisk .rg::after { right: 0; }
.ewhisk .pt { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); }
.eaxis { position: relative; height: 16px; font-family: var(--latin); font-size: 10.5px; color: var(--muted); }
.eaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.elegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.elegend span { display: inline-flex; align-items: center; gap: 5px; }
.elegend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.elegend .lb { --c: #3b82f6; }
.elegend .lf { --c: #f59e0b; }
.elegend .lr { width: 16px; height: 9px; border-radius: 0; background: linear-gradient(var(--ink2), var(--ink2)) center / 100% 2px no-repeat; border-left: 2px solid var(--ink2); border-right: 2px solid var(--ink2); }
.elegend .ld { width: 8px; height: 8px; border-radius: 1px; background: var(--ink); transform: rotate(45deg); }
.elegend .lg { width: 0; height: 12px; border-radius: 0; border-left: 2px dashed #b91c1c; background: none; }
.emsg { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.emsg.warn { color: #92400e; }
.esay { margin: 0; }
.enote { margin: 0; font-size: 11.5px; color: var(--muted); }
.flash { animation: wk-flash .45s ease-out; }
@keyframes wk-flash { from { opacity: .35; transform: translateY(3px); } }

/* ---- 報告・連絡・相談 ---- */
.rwhen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rw { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; color: var(--ink2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rw .k { align-self: flex-start; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 8px; background: #dbeafe; color: #1e40af; }
.rw.urgent { border-color: #fecaca; }
.rw.urgent .k { background: #fee2e2; color: #991b1b; }
.rw b { font-size: 14px; color: var(--ink); }
.rorder { list-style: none; margin: 12px 0 0; padding: 0; display: flex; counter-reset: ro; }
.rorder li { counter-increment: ro; flex: 1 1 0; min-width: 0; padding: 9px 14px 9px 26px; margin-right: -6px; background: var(--c); color: #fff; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); font-size: 12px; }
.rorder li:first-child { padding-left: 16px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.rorder li:nth-child(1) { --c: #1d4ed8; }
.rorder li:nth-child(2) { --c: #2563eb; }
.rorder li:nth-child(3) { --c: #3b82f6; }
.rorder b { display: block; font-size: 14px; }
.rorder b::before { content: counter(ro) ". "; font-family: var(--latin); }
.replab { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; align-items: start; }
.rcases { display: flex; gap: 6px; flex-wrap: wrap; }
.rcases .pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rslot { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; }
.rslot h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.ropts { display: grid; gap: 5px; }
.ropt { appearance: none; font: inherit; font-size: 13px; text-align: left; color: var(--ink); border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 11px; cursor: pointer; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.ropt::before { content: ""; width: 18px; height: 18px; box-sizing: border-box; margin-top: 1px; border-radius: 50%; border: 1.5px solid #94a3b8; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.ropt:hover { border-color: #94a3b8; }
.ropt[aria-pressed="true"].ok { border-color: #16a34a; background: #f0fdf4; }
.ropt[aria-pressed="true"].ok::before { content: "○"; background: #16a34a; border-color: #16a34a; }
.ropt[aria-pressed="true"].ng { border-color: #dc2626; background: #fef2f2; }
.ropt[aria-pressed="true"].ng::before { content: "✕"; background: #dc2626; border-color: #dc2626; }
.rwhy { margin: 6px 0 0; font-size: 12.5px; border-radius: 8px; padding: 6px 10px; }
.rwhy.ok { background: #f0fdf4; color: #14532d; }
.rwhy.ng { background: #fef2f2; color: #7f1d1d; }
.repout { display: grid; gap: 12px; position: sticky; top: 12px; }
.chat { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: start; }
.av { width: 42px; height: 42px; border-radius: 12px; background: var(--k-design); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bub { background: var(--line2); border-radius: 4px 14px 14px 14px; padding: 10px 13px; font-size: 13.5px; min-height: 96px; }
.bub p { margin: 0 0 6px; }
.bub p:last-child { margin-bottom: 0; }
.bub .ph { color: var(--muted); }
.bub .ng { text-decoration: underline wavy #dc2626; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rjudge { font-size: 13px; font-weight: 700; border-radius: 10px; padding: 9px 12px; background: var(--line2); color: var(--ink2); }
.rjudge.all { background: #f0fdf4; color: #14532d; }
.rjudge small { display: block; font-weight: 500; margin-top: 2px; }

/* ---- 質問・レビュー ---- */
.agrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rvgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rvgrid ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 13px; }
.rvspeed { margin-top: 10px; padding: 12px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.rvspeed .big { grid-row: span 2; font-family: var(--latin); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--k-design); text-align: center; }
.rvspeed .big small { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--ink2); }
.rvspeed p { margin: 0; font-size: 13px; color: var(--ink2); }

/* ---- ドキュメント ---- */
.mcmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
.mcmp .say { padding: 12px 14px; }
.tpl { margin: 0 0 8px; font-family: var(--sans); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: #14532d; }
.copy { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid #86efac; background: #fff; color: #166534; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.dkgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dplace { margin-top: 10px; padding: 12px 16px; display: grid; gap: 6px; font-size: 13px; color: var(--ink2); }
.dplace h3 { margin: 0; font-size: 14.5px; color: var(--ink); }
.dplace p { margin: 0; }

/* ---- 時間の使い方 ---- */
.day { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; position: relative; }
.day::before { content: ""; position: absolute; left: 6%; right: 6%; top: 12px; height: 2px; background: var(--line); }
.day li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.day .t { position: relative; align-self: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--k-design); border-radius: 999px; padding: 2px 12px; }
.day li:nth-child(3) .t, .day li:nth-child(4) .t { background: var(--k-test); }
.day li:last-child .t { background: var(--k-ship); }
.day .wk { flex: 1; }
.tmgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* ---- 学び方・AI ---- */
.lngrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lnlinks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; }
.wk.ai { background: #faf8ff; border-color: #ddd6fe; }
.wk.ai h3::before { content: "AI"; font-family: var(--latin); font-size: 10.5px; font-weight: 600; background: #ede9fe; color: #5b21b6; border-radius: 5px; padding: 1px 6px; }
.aigrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

/* ---- チェックリスト ---- */
.ckgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; }
.ckgrid h3 { margin: 0 0 6px; font-size: 14.5px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mlist label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.mlist label:hover { background: var(--line2); }
.mlist input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--k-test); flex: none; }
.mlist input:checked + span { color: var(--muted); text-decoration: line-through; }
.ckfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mcount { font-size: 12.5px; font-weight: 700; color: var(--k-test); }
.ckreset { appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }
#check .src { margin-top: 14px; }

.etask:focus-visible, .ropt:focus-visible, .pill:focus-visible, .seg button:focus-visible, .copy:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .tkq, .rwhen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agrid, .dkgrid, .tmgrid, .lngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aigrid, .day { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day::before { display: none; }
  .estlab, .replab { grid-template-columns: 1fr; }
  .repout { position: static; }
  .emini { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; position: sticky; bottom: 10px; z-index: 2; margin-top: 12px; background: var(--ink); color: #fff; border-radius: 12px; padding: 8px 13px; font-size: 12.5px; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .6); }
  .emini b { font-family: var(--latin); font-size: 16px; font-weight: 600; }
}
@media (max-width: 760px) {
  .tkstory { grid-template-columns: 1fr; gap: 6px; }
  .tkcmp, .tkfoot, .mcmp, .ckgrid { grid-template-columns: 1fr; }
  .ckgrid > div + div { margin-top: 10px; }
  .tkrows { grid-template-columns: 1fr; }
  .tkrows dd { border-top: 0; padding-top: 0; }
  .tkq, .rwhen, .estips, .agrid, .rvgrid, .dkgrid, .tmgrid, .lngrid, .aigrid, .day { grid-template-columns: 1fr; }
  .day .t { align-self: flex-start; }
  .rorder { flex-direction: column; gap: 4px; }
  .rorder li, .rorder li:first-child { margin-right: 0; padding: 8px 12px; clip-path: none; border-radius: 10px; }
  .enums { grid-template-columns: 1fr 1fr; }
  .enum.pert { grid-column: 1 / -1; }
  .enum b { font-size: 21px; }
  .rvspeed { grid-template-columns: 1fr; }
  .rvspeed .big { grid-row: auto; text-align: left; }
  .etask { grid-template-columns: 18px minmax(0, 1fr); }
  .etask .hr { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }