/* Styl aplikace (issue 0030): jednosloupcové rozvržení od 375 px, editor konceptu (R13).
   Soubor je v allowlistu service workeru (PwaConfig::ASSETS) a jeho obsah je součástí identity buildu. */
/* Světlý a tmavý režim podle nastavení systému (issue 0080): barvy jen jako proměnné v :root.
   --bg je zároveň <meta name="theme-color"> v @layout.latte, aby Android volil ikony lišt podle pozadí stránky;
   kontrast dvojic hlídá tests/Pwa/ColorSchemeTest.phpt. */
:root {
	color-scheme: light dark;
	--bg: #ffffff; --fg: #1b1b1b; --border: #dddddd; --field-border: #888888; --dashed: #777777;
	--muted-bg: #f4f4f4; --muted-fg: #333333; --flash-border: #555555;
	--error: #b00020; --ok: #1b5e20; --warn-bg: #fffbe6; --warn-border: #e0c200; --conflict: #e0a800;
	--accent: #1a4fba; --accent-bg: #eef3ff; --new-bg: #dcf3e3; --new-ring: #15803d;
	--late-bg: #fdf2f2; --late-fg: #8a1c1c; --focus: #1a73e8;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121212; --fg: #e8e8e8; --border: #3a3a3a; --field-border: #8a8a8a; --dashed: #8a8a8a;
		--muted-bg: #1f1f1f; --muted-fg: #d0d0d0; --flash-border: #9a9a9a;
		--error: #ff8a80; --ok: #81c995; --warn-bg: #332b00; --warn-border: #c9a800; --conflict: #e0a800;
		--accent: #8ab4f8; --accent-bg: #1a2540; --new-bg: #12351f; --new-ring: #4ade80;
		--late-bg: #3a1515; --late-fg: #ffb4ab; --focus: #8ab4f8;
	}
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0 1rem 2rem; font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); }
nav form { margin: 0; }
main { max-width: 48rem; margin: 0 auto; }
a, button, input, select, textarea { font: inherit; }
nav a { display: inline-block; min-height: 24px; padding: .125rem 0; }
button, select { min-height: 24px; }
button { min-width: 24px; padding: .5rem 1rem; }
.flash { padding: .5rem 1rem; border-left: 4px solid var(--flash-border); background: var(--muted-bg); }
.flash-error { border-color: var(--error); }
/* Doporučení (MFA, #107): výrazné, ale bez blokování práce. */
.recommendation { margin: .75rem 0; padding: .5rem 1rem; border-left: 4px solid var(--warn-border); background: var(--warn-bg); }
.binding-error { display: block; color: var(--error); }
.binding-media-changed, .binding-foreign-media { display: block; }
/* Lišta aktualizace nelepí: lepivý je jen stav editoru, aby se dvě lišty nepřekrývaly a nezakryly fokus. */
#pwa-update { padding: .5rem 1rem; background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); }

/* Editor: lepivý stav nahoře, pole pod sebou; fokus pod lepivou lištou zůstane vidět (scroll-margin). */
.editor-status { margin: .25rem 0; }
#editor-status { position: sticky; top: 0; z-index: 1; padding: .5rem 0; background: var(--bg); border-bottom: 1px solid var(--border); }
#editor-status[data-state="saved"] { color: var(--ok); }
#editor-status[data-state="offline"], #editor-status[data-state="conflict"], #editor-status[data-state="expired"],
#editor-status[data-state="invalid"], #editor-status[data-state="failed"] { color: var(--error); }
.editor .field, .editor fieldset { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1rem; }
.editor input, .editor select, .editor textarea { width: 100%; min-height: 44px; padding: .5rem; border: 1px solid var(--field-border); border-radius: 4px; scroll-margin-top: 5rem; }
.editor input[type="radio"] { width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; border: 0; }
.editor .bool label { display: flex; align-items: center; gap: .5rem; min-height: 24px; }
.editor textarea { min-height: 8rem; }
.editor fieldset { border: 1px solid var(--border); padding: .75rem; }
.attribute-group { margin: 0 0 1rem; }
.attribute-group summary { min-height: 44px; padding: .6rem 0; cursor: pointer; font-weight: 600; }
.field-error { color: var(--error); }
.char-count { display: block; font-size: .875rem; }
.char-count-target { display: block; overflow-wrap: anywhere; }
.char-count-over { color: var(--error); font-weight: 700; }
.char-count-over::before { content: "⚠ "; content: "⚠ " / ""; }
.media-list { list-style: none; margin: 0; padding: 0; }
.media-item { margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--border); }
.media-item img { display: block; max-width: 100%; height: auto; }
.media-placeholder { margin: 0; padding: 2rem 1rem; background: var(--muted-bg); color: var(--muted-fg); }
.media-item textarea { min-height: 4rem; }
.media { scroll-margin-top: 5rem; }
.media-upload { margin: 0 0 1rem; padding: .75rem; border: 1px dashed var(--dashed); }
.media-upload-list { margin: .5rem 0; padding-left: 1.25rem; }
.media-upload-list [data-state="failed"], .media-upload-list [data-state="interrupted"], .media-upload-list [data-state="expired"] { color: var(--error); }
.media-upload-list [data-state="done"] { color: var(--ok); }
.media-upload-name { overflow-wrap: anywhere; }
.media-move button:disabled { opacity: .5; }
.media-drag { cursor: grab; }
.media-handle[aria-pressed="true"] { outline: 3px solid var(--accent); }
.media-item.is-moving { border-color: var(--accent); background: var(--accent-bg); }
.media-item.is-target { border-top: 4px solid var(--accent); }
.media-item.is-target-after { border-bottom: 4px solid var(--accent); }
.media-item.is-new { animation: media-new 4s ease-out; }
.media-item.is-new:focus { outline: none; }
@keyframes media-new { from { background: var(--new-bg); box-shadow: 0 0 0 3px var(--new-ring); } to { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .media-item.is-new { animation: none; box-shadow: 0 0 0 3px var(--new-ring); } }
.media-placeholder[data-state="late"] { background: var(--late-bg); color: var(--late-fg); }
.media-preview-status:empty { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.editor-errors, .editor-conflict { margin: 1rem 0; padding: .75rem 1rem; border: 2px solid var(--error); scroll-margin-top: 5rem; }
.editor-conflict { border-color: var(--conflict); }
.editor-errors:focus, .editor-conflict:focus { outline: 3px solid var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Přepínač účtů (issue 0080): viditelný popisek, aktuální účet tučně s rámečkem, ne jako šedé zakázané tlačítko. */
.membership-switch { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
.membership-switch form { margin: 0; }
.membership-switch button[aria-current="true"] { font-weight: 700; color: var(--fg); background: var(--bg); border: 2px solid var(--accent); opacity: 1; cursor: default; }
[hidden] { display: none !important; }

/* Kopie nabídky na detailu (#143): dotyková výška odeslání jako v editoru. */
.listing-duplicate input[type="submit"] { min-height: 44px; }
.listing-duplicate small { display: block; }
.listing-duplicate-media summary { min-height: 44px; }
.listing-duplicate-media ul { list-style: none; margin: 0; padding: 0; }
.listing-duplicate-media label { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.listing-duplicate-media input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
.listing-duplicate-media img { flex: none; object-fit: cover; }
.listing-duplicate-media span { min-width: 0; overflow-wrap: anywhere; }

/* Odkaz v tabulce rozdílů (#144): dlouhá adresa se zalomí, stránka na mobilu nejde do strany. */
tr[data-field^="links."] a {
	overflow-wrap: anywhere;
}

/* Tabulka vazeb má šest sloupců: na mobilu se posouvá uvnitř sekce, stránka do strany nejde a Stáhnout zůstane dosažitelné. */
#targets { overflow-x: auto; }