/* Formularz konsultacji: styles of the module (owner app). Uses only the tokens of styles.css; nothing here changes an existing rule. */

/* "Zapisano" confirmation under the title of the settings screen */
.cf-saved { display: flex; align-items: center; gap: 6px; margin: -6px 0 -4px 2px; color: var(--ok); animation: cfIn 220ms var(--ease-out) both; }
.cf-saved svg { color: var(--ok); }
@keyframes cfIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* a card with a sentence and one small action below it */
.cf-head { display: flex; flex-direction: column; gap: 12px; }

/* quiet third line of a row: the exact words the client saw (smaller than the answer, never louder than it) */
.kv.stack .v.cf-sub { font-size: 13px; line-height: 18px; color: var(--fg3); font-weight: 400; margin-top: 3px; }
/* the state chip of a form sits under the service name, so the name can use the whole row */
.cf-state { display: flex; margin-top: 6px; }
/* two statements to tick: square boxes instead of the round radio of the shared .opt */
.opt.cf-cb .rd { border-radius: 7px; }
.opt.cf-cb[aria-pressed="true"] .rd::after { inset: 5px; border-radius: 2.5px; }

/* answers screen: the "do omówienia z klientką" card is neutral (no red, no warning colour, no score) */
.cf-flag { gap: 12px; box-shadow: var(--rim), inset 3px 0 0 var(--accent); }
.cf-flag svg { color: var(--accent); }
.cf-list { display: flex; flex-direction: column; }
.cf-item { padding: 12px 0; display: flex; flex-direction: column; gap: 3px; }
.cf-item + .cf-item { box-shadow: inset 0 .5px 0 var(--sep); }
.cf-note { display: block; margin-top: 4px; font-size: 15px; line-height: 21px; color: var(--fg2); font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; }

/* the destructive confirmation: still a pill, in the "bad" tint instead of white */
.btn.danger { background: var(--bad); color: #2a0a10; }
:root[data-theme="light"] .btn.danger { color: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn.danger { color: #fff; } }

/* keep long labels from pushing the toggle off the row in the template sheet */
.sheet .kv.stack .k { min-width: 0; }
.sheet textarea.ed { font-size: 16px; line-height: 23px; flex: none; }   /* flex: none, or the long info text is squeezed to the minimum height inside the sheet */
.sheet .rawbody pre { max-height: 38vh; overflow-y: auto; }

/* the demo hint on the settings screen when this view is a non-reader (?demo=1&reader=0) needs no extra style */
@media (prefers-reduced-motion: reduce) { .cf-saved { animation: none; } }