/* Tillägg till prototypens app.css: inloggning, flödesdiagram, tabeller och kort som prototypen saknade. */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--navy)}
.login-card{width:min(380px,100%);gap:12px}
.login-card label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.login-card input,.form input,.form select,.form textarea,select.sel,input.sel{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:8px 10px;font-size:13.5px;color:var(--fg)}
.login-logo{width:110px;filter:none;background:var(--navy);padding:8px 12px;border-radius:8px}
.fel{color:var(--crit);font-size:13px;min-height:18px}
.app[hidden],.login[hidden]{display:none}
.devnote{margin-bottom:0}
.devnote b{color:inherit}
.row.sp{justify-content:space-between}
.grow{flex:1}
.right{margin-left:auto}
.sm-t{font-size:12px}
.cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.pool{display:flex;flex-direction:column;gap:8px;max-height:72vh;overflow:auto;padding-right:4px}
.lead .nm a{color:var(--heading);text-decoration:none}
.lead .nm a:hover{text-decoration:underline}
.lead .foot{align-items:center}
.lane .lead{cursor:default}
.lane-people{display:flex;flex-direction:column;gap:12px}
.pipe{grid-template-columns:repeat(6,minmax(190px,1fr))}
.deal select{font-size:11.5px;border:1px solid var(--line);background:var(--surface-2);border-radius:6px;padding:2px 4px}
.deal .sg{color:var(--muted);font-size:11.5px}
.stage.won .stage-h{color:var(--good)} .stage.lost .stage-h{color:var(--crit)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.num-r{text-align:right;font-variant-numeric:tabular-nums}
table.t td .sub{display:block;font-size:11.5px;color:var(--muted)}
table.t tr.click td:first-child b{color:var(--heading)}
.tag-list{display:flex;gap:6px;flex-wrap:wrap}
.brief{white-space:pre-wrap;font-size:13.5px;line-height:1.55;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.brief strong{color:var(--heading)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.form .wide{grid-column:1/-1}
.mini-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* flödesdiagram i "Så fungerar det" */
.flow-d{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch}
.fnode{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;position:relative;font-size:12.5px}
.fnode b{color:var(--heading);font-size:13.5px}
.fnode .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fnode.hot{border-color:var(--sky);box-shadow:inset 0 3px 0 var(--sky)}
.fnode:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:800;z-index:1;background:var(--bg);border-radius:50%;width:16px;text-align:center}
.layer{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px}
.layer.ref{background:var(--chip-ladd-bg);color:var(--chip-ladd-fg)} .layer.arbete{background:var(--chip-depa-bg);color:var(--chip-depa-fg)} .layer.system{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.matrix td.y{color:var(--good);font-weight:700} .matrix td.n{color:var(--muted)}
.tl .c{word-break:break-word}
.halsa-n{font-weight:800;font-variant-numeric:tabular-nums}
.pending{color:var(--muted);font-style:italic}
details.card summary{cursor:pointer;font-weight:700;color:var(--heading)}
@media (max-width:1180px){.cols{grid-template-columns:minmax(0,1fr)}.flow-d{grid-template-columns:minmax(0,1fr)}.fnode:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%)}}
@media (max-width:860px){.pipe{grid-template-columns:repeat(6,200px)}}
body.no-notes .devnote{display:none}

/* Följdfrågor till Agge under säljunderlaget */
.chatt{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.chatt-q{align-self:flex-end;max-width:85%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px 10px 2px 10px;padding:8px 12px;white-space:pre-wrap}
.chatt-a{max-width:100%}
.chatt-f{display:flex;gap:8px;align-items:flex-end}
.chatt-f textarea{flex:1;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:vertical;min-height:44px}
.side .foot a.side-link{color:#9FC6E8;text-decoration:underline;text-underline-offset:3px}