/* Elinkaari: Asetukset → Elinkaarimallit + projektin etusivu (2026-10-31). docs/tyopoyta-ja-elinkaari.md */

/* ── Asetukset: Elinkaarimallit ── */
.lcs { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.lcs-list { flex:0 0 260px; max-width:100%; display:flex; flex-direction:column; gap:4px; }
.lcs-list-head { display:flex; align-items:center; justify-content:space-between; padding:0 2px 8px; }
.lcs-model { display:block; width:100%; text-align:left; padding:10px 12px; border-radius:8px; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--color-text,#1a1d23); font:inherit; }
.lcs-model:hover { background:var(--color-surface,#f3f4f6); }
.lcs-model.on { background:var(--color-bg,#fff); border-color:var(--color-primary,#1d4ed8); box-shadow:inset 3px 0 0 var(--color-primary,#1d4ed8); }
.lcs-model.off { opacity:.65; }
.lcs-model-name { display:block; font-weight:600; }
.lcs-model-meta { display:block; font-size:12px; color:var(--color-text-muted,#5b6472); }
.lcs-tag { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid currentColor; border-radius:4px; padding:0 4px; margin-left:4px; color:var(--color-text-muted,#5b6472); }
.lcs-editor { flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.lcs-row2 { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; }
.lcs-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.lcs-field > span { font-size:12px; color:var(--color-text-muted,#5b6472); }
.lcs-field small { font-size:11.5px; color:var(--color-text-muted,#5b6472); }
.lcs-check { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.lcs-muted { color:var(--color-text-muted,#5b6472); }
.lcs-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lcs-chip { height:30px; padding:0 12px; border-radius:15px; border:1px solid var(--color-border,#d3d8df); background:var(--color-bg,#fff); color:var(--color-text,#1a1d23); font-size:12.5px; cursor:pointer; }
.lcs-chip.on { background:var(--color-text,#1a1d23); border-color:var(--color-text,#1a1d23); color:var(--color-bg,#fff); font-weight:600; }
.lcs-phases { border:1px solid var(--color-border,#e2e5ea); border-radius:10px; overflow:hidden; background:var(--color-bg,#fff); }
.lcs-phase { border-bottom:1px solid var(--color-border,#eef0f3); }
.lcs-phase:last-child { border-bottom:0; }
.lcs-phase-row { display:flex; align-items:center; }
.lcs-phase-main { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:11px 14px; border:0; background:transparent; cursor:pointer; text-align:left; font:inherit; font-size:13px; color:var(--color-text,#1a1d23); }
.lcs-phase.open > .lcs-phase-row { background:var(--color-surface,#f1f5fe); }
.lcs-sw { width:14px; height:14px; border-radius:3px; flex:0 0 auto; }
.lcs-phase-name { width:150px; flex:0 0 auto; font-weight:600; }
.lcs-phase-cond { flex:1 1 220px; min-width:0; }
.lcs-iconbtns { display:flex; gap:2px; padding-right:8px; }
.lcs-icon { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--color-text,#1a1d23); cursor:pointer; }
.lcs-icon:hover:not(:disabled) { background:var(--color-surface,#eef0f3); }
.lcs-icon:disabled { opacity:.3; cursor:default; }
.lcs-icon svg, .lcs-chev svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lcs-phase-body { padding:12px 16px 16px 40px; background:var(--color-surface,#fbfbfc); display:flex; flex-direction:column; gap:12px; }
.lcs-items { overflow-x:auto; }
.lcs-items-head, .lcs-item-row { display:grid; grid-template-columns:22px minmax(200px,2fr) 150px minmax(160px,1.3fr) 120px 70px 20px; gap:10px; align-items:center; min-width:760px; }
.lcs-items-head { padding:6px 6px; font-size:11.5px; font-weight:600; color:var(--color-text-muted,#5b6472); border-bottom:1px solid var(--color-border,#e2e5ea); }
.lcs-item { border-bottom:1px solid var(--color-border,#eef0f3); }
.lcs-item-row { width:100%; padding:8px 6px; border:0; background:transparent; cursor:pointer; text-align:left; font:inherit; font-size:13px; color:var(--color-text,#1a1d23); border-radius:6px; }
.lcs-item.open > .lcs-item-row { background:var(--color-surface,#e8eefc); }
.lcs-item-title { min-width:0; }
.lcs-sub { display:block; font-size:12px; color:var(--color-text-muted,#5b6472); }
.lcs-kind { width:14px; height:14px; box-sizing:border-box; border:2px solid var(--color-primary,#1d4ed8); }
.lcs-kind.task { border-radius:50%; }
.lcs-kind.check { border-radius:3px; border-color:var(--color-text-muted,#9aa3b0); }
.lcs-add { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; }
.lcs-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:6px; }
.lcs-msg { font-size:13px; font-weight:600; }
.lcs-msg.err { color:#b91c1c; }

/* Kohdan muokkain */
.lie { display:flex; flex-wrap:wrap; gap:14px 24px; padding:14px; margin:4px 0 10px; border:1px solid var(--color-primary,#c7d3f5); border-radius:10px; background:var(--color-bg,#fff); }
.lie-col { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.lie-seg { display:inline-flex; gap:3px; padding:3px; border-radius:8px; background:var(--color-surface,#e9ecf0); align-self:flex-start; }
.lie-seg button { height:28px; padding:0 10px; border:0; border-radius:6px; background:transparent; font:inherit; font-size:12.5px; color:var(--color-text-muted,#5b6472); cursor:pointer; }
.lie-seg button.on { background:var(--color-bg,#fff); color:var(--color-text,#1a1d23); font-weight:600; box-shadow:0 1px 2px rgba(20,30,50,.12); }
.lie-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }

/* Kentät */
.lc-input { width:100%; box-sizing:border-box; height:34px; padding:0 10px; border:1px solid var(--color-border,#d3d8df); border-radius:8px; background:var(--color-bg,#fff); color:var(--color-text,#1a1d23); font:inherit; font-size:13px; }
textarea.lc-input { height:auto; min-height:56px; padding:6px 10px; resize:vertical; }
.lc-input:focus { outline:2px solid var(--color-primary,#1d4ed8); outline-offset:-1px; }

/* ── Projektin elinkaari (Kooste / etusivu) ── */
.plc { display:flex; flex-direction:column; gap:12px; padding:14px 16px 16px; margin:0 0 14px; border:1px solid var(--color-border,#e2e5ea); border-radius:10px; background:var(--color-bg,#fff); }
.plc-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.plc-title { font-weight:700; font-size:15px; }
.plc-sp { flex:1; }
.plc-muted { color:var(--color-text-muted,#5b6472); font-size:12.5px; }
.plc-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border:1px solid var(--color-border,#d3d8df); border-radius:13px; background:var(--color-bg,#fff); color:var(--color-text,#2b313b); font:inherit; font-size:12px; cursor:pointer; }
.plc-chip svg, .plc-check svg, .plc-dot svg, .plc-move-path svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.plc-model-select { width:auto; height:28px; }
.plc-btn { height:30px; padding:0 12px; border:1px solid var(--color-border,#d3d8df); border-radius:8px; background:var(--color-bg,#fff); color:var(--color-text,#1a1d23); font:inherit; font-size:12.5px; cursor:pointer; }
.plc-btn:disabled { opacity:.5; cursor:default; }
.plc-btn-pri { background:var(--color-primary,#1d4ed8); border-color:var(--color-primary,#1d4ed8); color:#fff; font-weight:600; }
.plc-link { border:0; background:transparent; color:var(--color-primary,#1d4ed8); font:inherit; font-size:12.5px; cursor:pointer; padding:2px 4px; white-space:nowrap; }
.plc-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border:1px solid currentColor; border-radius:4px; padding:0 5px; color:var(--color-text-muted,#5b6472); white-space:nowrap; }
.plc-tag.warn { color:#b45309; }
.plc-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; border-radius:8px; background:var(--color-surface,#f5f6f8); font-size:13px; }
.plc-note-sug { background:color-mix(in srgb, var(--color-primary,#1d4ed8) 9%, transparent); }
.plc-note > span:first-child { flex:1 1 260px; }
.plc-note-acts { display:flex; gap:6px; }
.plc-steps-wrap { overflow-x:auto; }
.plc-steps { display:grid; gap:4px; min-width:100%; }
.plc-step { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px 10px; border:0; border-radius:8px; background:transparent; cursor:pointer; font:inherit; color:var(--color-text,#1a1d23); text-align:center; }
.plc-step:hover, .plc-step.sel { background:var(--color-surface,#f1f5fe); }
.plc-dot { width:28px; height:28px; box-sizing:border-box; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12.5px; border:2px solid var(--color-border,#c9cfd8); color:var(--color-text-muted,#5b6472); background:var(--color-bg,#fff); }
.plc-step.done .plc-dot { background:var(--color-primary,#1d4ed8); border-color:var(--color-primary,#1d4ed8); color:#fff; }
.plc-step.cur .plc-dot { border:3px solid var(--color-primary,#1d4ed8); color:var(--color-primary,#1d4ed8); box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary,#1d4ed8) 18%, transparent); }
.plc-step-name { font-size:12.5px; font-weight:600; }
.plc-step.fut .plc-step-name { font-weight:400; color:var(--color-text-muted,#5b6472); }
.plc-step.cur .plc-step-name { color:var(--color-primary,#1d4ed8); font-weight:700; }
.plc-step-date { font-size:11px; color:var(--color-text-muted,#5b6472); font-variant-numeric:tabular-nums; min-height:14px; }
.plc-step-bar { position:absolute; left:8px; right:8px; bottom:2px; height:3px; border-radius:2px; opacity:.85; }
.plc-step.fut .plc-step-bar { opacity:.35; }
.plc-list-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding-top:4px; }
.plc-list-head h3 { margin:0; font-size:15px; }
.plc-empty { padding:8px 0; }
.plc-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0; border-top:1px solid var(--color-border,#eef0f3); font-size:13px; }
.plc-check { width:20px; height:20px; flex:0 0 auto; box-sizing:border-box; border-radius:50%; border:2px solid var(--color-text-muted,#9aa3b0); background:var(--color-bg,#fff); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.plc-check.sq { border-radius:4px; }
.plc-check.on { background:var(--color-primary,#1d4ed8); border-color:var(--color-primary,#1d4ed8); }
.plc-check:disabled { cursor:default; opacity:.5; border-style:dashed; }
.plc-row.late .plc-check { border-color:#b91c1c; }
.plc-row-main { flex:1 1 240px; min-width:0; }
.plc-row-title { display:block; }
.plc-row.done .plc-row-title { color:var(--color-text-muted,#5b6472); text-decoration:line-through; }
.plc-row-sub { display:block; font-size:12px; color:var(--color-text-muted,#5b6472); }
.plc-row.late .plc-row-sub { color:#b91c1c; font-weight:600; }
.plc-role { width:150px; font-size:12.5px; color:var(--color-text-muted,#5b6472); }
.plc-msg { font-size:13px; font-weight:600; }
.plc-msg.err { color:#b91c1c; }
.plc-modal-back { position:fixed; inset:0; z-index:2147480000; background:rgba(15,23,42,.35); display:flex; align-items:flex-start; justify-content:center; padding:60px 16px; overflow:auto; }
.plc-modal { width:100%; max-width:600px; background:var(--color-bg,#fff); color:var(--color-text,#1a1d23); border-radius:12px; box-shadow:0 24px 64px rgba(15,23,42,.3); padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.plc-modal-head { display:flex; align-items:center; justify-content:space-between; font-size:16px; }
.plc-x { border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--color-text-muted,#5b6472); }
.plc-modal-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:4px; }
.plc-move-path { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.plc-chip-ph { padding:3px 9px; border-radius:5px; font-size:12.5px; font-weight:600; }
.plc-move-sec { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:8px; background:var(--color-surface,#f5f6f8); }
.plc-hist { display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--color-border,#eef0f3); font-size:13px; }
.plc-hist-date { width:110px; flex:0 0 auto; color:var(--color-text-muted,#5b6472); font-variant-numeric:tabular-nums; }

/* ── Projektin etusivu (V4, 2026-10-31): pääsarake + piilotettava oikea sarake, Työmaalta-karuselli ── */
.pv-front { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; }
.pv-front.with-side { grid-template-columns:minmax(0,1fr) minmax(230px,300px); }
.pv-main-col { min-width:0; display:flex; flex-direction:column; }
.pv-main-col > .plc { margin-top:12px; }
.pv-h { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); margin:14px 0 4px; }
.pv-tl-wrap { display:flex; flex-direction:column; }
.pv-front-side { position:sticky; top:0; }
.pv-btn.on { border-color:var(--color-primary,#1d4ed8); color:var(--color-primary,#1d4ed8); }
.pv-btn svg { vertical-align:-2px; margin-right:4px; }
.pv-quick { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.pv-quick textarea { width:100%; resize:vertical; min-height:62px; box-sizing:border-box; }
.pv-quick-acts { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.pv-quick-pin { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--color-text-muted); }
.pv-snote { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; border:0; border-radius:4px; padding:8px 10px; margin-bottom:8px; cursor:pointer;
    font:inherit; font-size:12.5px; background:var(--nt-paper,#fff4b8); color:var(--nt-ink,#3a3220); box-shadow:0 1px 2px rgba(40,25,10,.15); }
.pv-snote span { white-space:pre-line; max-height:4.4em; overflow:hidden; line-height:1.45; }
.pv-snote small { opacity:.7; font-size:11px; }
@container (max-width: 820px) {
    .pv-front.with-side { grid-template-columns:minmax(0,1fr); }
    .pv-front-side { position:static; border-left:0; padding-left:0; border-top:1px solid var(--color-border); }
}

.pvc { display:flex; flex-direction:column; gap:8px; }
.pvc-head { display:flex; align-items:baseline; gap:10px; }
.pvc-title { font-weight:700; font-size:13px; }
.pvc-muted { color:var(--color-text-muted); font-size:12px; }
.pvc-stage { position:relative; border-radius:8px; overflow:hidden; background:color-mix(in srgb, var(--color-text) 8%, transparent); }
.pvc-main { display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; position:relative; }
.pvc-main img { display:block; width:100%; aspect-ratio:16/7; object-fit:cover; max-height:300px; }
.pvc-cap { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 8px; display:flex; gap:10px; align-items:baseline; text-align:left;
    background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff; font-size:12px; }
.pvc-cap b { font-size:13px; }
.pvc-nav { position:absolute; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
    background:rgba(0,0,0,.42); color:#fff; padding:0; }
.pvc-nav svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pvc-nav:hover { background:rgba(0,0,0,.62); }
.pvc-prev { left:8px; } .pvc-next { right:8px; }
.pvc-thumbs { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.pvc-thumb { flex:none; width:58px; height:42px; padding:0; border:2px solid transparent; border-radius:5px; overflow:hidden; cursor:pointer; background:none; opacity:.7; }
.pvc-thumb.on { border-color:var(--color-primary,#1d4ed8); opacity:1; }
.pvc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Elinkaarimallin AI-ehdotus (V7) ── */
.lcs-ai-btn { display:inline-flex; align-items:center; gap:6px; margin:4px 0 8px; width:100%; justify-content:center; }
.lcs-ai-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.plc-modal.lcai { width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 48px); display:flex; flex-direction:column; gap:10px; overflow:auto; }
.lcai textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:110px; }
.lcai-drop { display:flex; align-items:center; gap:10px; padding:12px; border:1.5px dashed var(--color-border,#d3d8df); border-radius:8px; cursor:pointer; font-size:12.5px; color:var(--color-text-muted); }
.lcai-drop input[type=file] { max-width:220px; font-size:12px; }
.lcai-file { display:flex; align-items:center; gap:10px; font-size:12.5px; padding:4px 2px; border-bottom:1px solid var(--color-border-light, var(--color-border,#e2e5ea)); }
.lcai-file span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lcai-privacy { font-size:11.5px; }
.lcai-intro { font-size:13px; }
.lcai-list { display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; padding-right:4px; }
.lcai-phase { border:1px solid var(--color-border,#e2e5ea); border-radius:8px; padding:8px 10px; }
.lcai-phase.off { opacity:.55; }
.lcai-ph-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; cursor:pointer; }
.lcai-item { display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:8px; padding:4px 0 4px 24px; font-size:12.5px; cursor:pointer; }
.lcai-item .lcs-muted { grid-column:2; font-size:11.5px; }
.lcai-item-t { min-width:0; }