/* Product L01: scoped observation support. Reference photos remain uncropped. */
#braunObservation { --braun-ink:#25251f; --braun-muted:#6c6a60; --braun-line:#d7d2c4; --braun-paper:#f7f5ee; color:var(--braun-ink); }
#braunObservation[hidden], #braunObservation [hidden] { display:none!important; }
#braunObservation .braun-intro { position:relative; padding:3px 0 19px; }
#braunObservation .braun-kicker { font-size:10px; letter-spacing:.15em; color:var(--braun-muted); font-weight:700; }
#braunObservation .braun-intro p { font-size:17px; line-height:1.8; margin:7px 0; color:var(--braun-ink); }
#braunObservation .braun-time { color:var(--braun-muted); font-size:12px; }
#braunObservation .braun-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#braunObservation .braun-card { min-width:0; border:1px solid var(--braun-line); background:#fff; display:flex; flex-direction:column; padding:14px; transition:border-color .15s,box-shadow .15s; }
#braunObservation .braun-card.is-selected { border-color:var(--braun-ink); box-shadow:inset 0 3px #f8cd45; }
#braunObservation .braun-card header { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 10px; }
#braunObservation .braun-card header>span { font:600 11px/1.5 ui-monospace,monospace; color:var(--braun-muted); }
#braunObservation .braun-card h4 { font-size:18px; margin:0; line-height:1.5; }
#braunObservation .braun-card header small { font-size:11px; color:var(--braun-muted); }
#braunObservation button { font:inherit; cursor:pointer; }
#braunObservation .braun-image-button { display:block; position:relative; width:100%; height:200px; padding:8px; background:var(--braun-paper); border:0; border-radius:0; }
#braunObservation .braun-image-button img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; }
#braunObservation .braun-image-button>span { position:absolute; bottom:7px; right:7px; background:rgba(255,255,255,.92); border:1px solid var(--braun-line); padding:2px 6px; font-size:10px; color:var(--braun-muted); }
#braunObservation .braun-question { color:var(--braun-ink); font-weight:650; font-size:13px; line-height:1.8; min-height:48px; margin:12px 0 9px; }
#braunObservation details { font-size:12px; line-height:1.8; }
#braunObservation summary { cursor:pointer; font-weight:650; color:var(--braun-ink); padding:4px 0; }
#braunObservation details p { font-size:12px; line-height:1.85; margin:6px 0 10px; color:var(--braun-muted); }
#braunObservation .braun-source-wrap { margin-top:auto; padding:11px 0; }
#braunObservation .braun-source { font-size:10px; color:var(--braun-muted); text-decoration:underline; text-underline-offset:3px; }
#braunObservation .braun-credit summary, #braunObservation .braun-credit p { font-size:10px; color:var(--braun-muted); overflow-wrap:anywhere; }
#braunObservation .braun-select { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:650; border-top:1px solid var(--braun-line); padding:12px 0 0; margin:0; cursor:pointer; }
#braunObservation .braun-select input { width:16px; height:16px; accent-color:#28281f; margin:0; flex:none; }
#braunObservation .braun-select:has(input:disabled) { color:#807d73; }
#braunObservation .braun-compose { background:var(--braun-paper); border:1px solid var(--braun-line); padding:20px; margin-top:20px; }
#braunObservation .braun-compose-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
#braunObservation .braun-compose-heading h4 { font-size:16px; margin:0; line-height:1.7; }
#braunObservation .braun-compose-heading>span { font-size:11px; font-weight:650; color:var(--braun-muted); }
#braunObservation .braun-compose>p { font-size:12px; line-height:1.8; color:var(--braun-muted); margin:8px 0 14px; }
#braunObservation .braun-summary-label { display:block; margin:0 0 6px; font-size:12px; font-weight:650; }
#braunObservation textarea { display:block; width:100%; min-height:112px; box-sizing:border-box; resize:vertical; border:1px solid #79766d; border-radius:0; padding:12px; font-family:inherit; font-size:14px; line-height:1.9; background:white; color:var(--braun-ink); }
#braunObservation textarea::placeholder { color:#929087; }
#braunObservation .braun-word-help { font-size:11px; line-height:1.8; color:var(--braun-muted); margin:8px 0 16px; }
#braunObservation .braun-actions { display:flex; flex-wrap:wrap; gap:8px; }
#braunObservation .braun-actions button { padding:10px 14px; border:1px solid #3a392f; color:var(--braun-ink); background:#fff; font-size:12px; font-weight:650; border-radius:0; min-height:40px; }
#braunObservation .braun-actions button:first-child { background:#f8cd45; }
#braunObservation .braun-actions button:disabled { opacity:.6; cursor:wait; }
#braunObservation .braun-compose .braun-network-note { font-size:10px; margin:11px 0 4px; }
#braunObservation .braun-compose .braun-status { font-size:11px; margin:5px 0 0; color:#526144; min-height:20px; }
#braunObservation .braun-compose .braun-status.is-warning { color:#a24829; }
#braunObservation .braun-feedback { background:#fff; border-left:3px solid #e1b438; margin-top:16px; padding:14px 16px; font-size:13px; line-height:1.85; }
#braunObservation .braun-feedback b { font-size:12px; }
#braunObservation .braun-feedback p { white-space:pre-wrap; margin:7px 0; }
#braunObservation .braun-feedback ul { padding-left:20px; margin:8px 0 0; }
#braunObservation .braun-feedback small { font-size:10px; color:var(--braun-muted); }
#braunObservation .braun-concept { padding:13px 0 0; margin-top:6px; }
#braunObservation .braun-concept summary { font-size:12px; }
#braunObservation .braun-concept p { max-width:850px; }
#braunObservation button:focus-visible, #braunObservation summary:focus-visible, #braunObservation a:focus-visible, #braunObservation input:focus-visible, #braunObservation textarea:focus-visible { outline:3px solid #756012; outline-offset:3px; }
#braunObservation .braun-dialog { position:fixed; inset:0; margin:auto; max-width:min(1100px,94vw); max-height:94vh; padding:18px; border:1px solid var(--braun-ink); background:var(--braun-paper); color:var(--braun-ink); box-sizing:border-box; }
#braunObservation .braun-dialog::backdrop { background:rgba(15,15,12,.78); }
#braunObservation .braun-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; margin-bottom:12px; }
#braunObservation .braun-dialog-header button { border:1px solid var(--braun-ink); padding:8px 12px; background:white; color:var(--braun-ink); font-size:12px; }
#braunObservation .braun-dialog>img { display:block; width:auto; height:auto; max-width:100%; max-height:76vh; object-fit:contain; margin:0 auto; }
#braunObservation .braun-dialog>a { display:block; text-align:center; font-size:11px; color:var(--braun-muted); margin:10px 0 0; }
@media (max-width:900px) { #braunObservation .braun-cards { gap:10px; } #braunObservation .braun-card { padding:10px; } #braunObservation .braun-image-button { height:175px; } }
@media (max-width:640px) { #braunObservation .braun-cards { grid-template-columns:1fr; gap:14px; } #braunObservation .braun-card { padding:15px; } #braunObservation .braun-image-button { height:240px; } #braunObservation .braun-question { min-height:0; } #braunObservation .braun-intro p { font-size:16px; } #braunObservation .braun-compose { padding:15px; } #braunObservation .braun-actions button { flex:1 1 auto; } #braunObservation .braun-dialog { padding:12px; } #braunObservation .braun-dialog-header { font-size:12px; gap:10px; } }
@media print { #braunObservation .braun-actions, #braunObservation .braun-dialog, #braunObservation .braun-image-button>span { display:none!important; } #braunObservation .braun-card { break-inside:avoid; } #braunObservation .braun-compose { break-inside:avoid; } }