/* Focused-dialog recipe. Existing library surfaces retain their own tokens. */
:root{
  --fd-accent:#DF6B46;--fd-accent-hover:#d8603c;--fd-accent-soft:#fcf0eb;
  --fd-ink:#262622;--fd-muted:#62645f;--fd-line:#deded8;--fd-surface:#fff;
  --fd-danger:#b42332;--fd-danger-hover:#951e2b;--fd-danger-soft:#fff0f1;
  --fd-focus:#993b20;--fd-radius:16px;--fd-control-radius:8px;
  --fd-1:4px;--fd-2:8px;--fd-3:12px;--fd-4:16px;--fd-5:20px;--fd-6:24px;--fd-7:28px;--fd-8:32px;
  --fd-shadow:0 24px 80px #25231e2b;--fd-row:44px;
}
html{scrollbar-gutter:stable}
.focused-dialog{width:440px;max-width:calc(100vw - var(--fd-8));max-height:calc(100dvh - var(--fd-8));margin:auto;padding:var(--fd-6);border:1px solid var(--fd-line);border-radius:var(--fd-radius);box-shadow:var(--fd-shadow);background:var(--fd-surface);color:var(--fd-ink);overflow:auto;overscroll-behavior:contain;animation:focused-arrive 160ms ease-out}
.focused-dialog::backdrop{background:#28251f66;backdrop-filter:blur(4px)}
.focused-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--fd-4);margin-bottom:var(--fd-5)}
.focused-symbol{width:var(--fd-row);height:var(--fd-row);border-radius:var(--fd-control-radius);display:grid;place-items:center;background:var(--fd-accent-soft);color:var(--fd-focus)}
.focused-symbol .ico{width:20px;height:20px}
.focused-symbol.is-danger{background:var(--fd-danger-soft);color:var(--fd-danger)}
.focused-close{display:grid;place-items:center;width:var(--fd-row);height:var(--fd-row);padding:var(--fd-3);border:1px solid transparent;border-radius:var(--fd-control-radius);color:var(--fd-muted);background:transparent}
.focused-close:hover{color:var(--fd-ink);background:#f4f4f0}
.focused-dialog h2{font-size:20px;line-height:28px;font-weight:650;letter-spacing:0;overflow-wrap:anywhere}
#focusedDescription{font-size:14px;line-height:24px;color:var(--fd-muted);margin-top:var(--fd-2)}
.focused-field{margin-top:var(--fd-6)}
.focused-label{display:flex;align-items:center;justify-content:space-between;gap:var(--fd-3);margin-bottom:var(--fd-2);font-size:13px;line-height:20px}
.focused-label label{font-weight:600}
.focused-label label span{color:var(--fd-danger)}
#focusedCount{font-size:12px;color:var(--fd-muted);font-variant-numeric:tabular-nums}
#focusedName{display:block;width:100%;min-width:0;min-height:var(--fd-row);padding:10px var(--fd-3);border:1px solid #b9bbb4;border-radius:var(--fd-control-radius);background:var(--fd-surface);color:var(--fd-ink);font-size:14px;line-height:22px;box-shadow:none}
#focusedName::placeholder{color:#6b6c66}
#focusedName:hover{border-color:#81867a}
#focusedName:focus{border-color:var(--fd-focus);outline:2px solid #DF6B4633;outline-offset:2px}
#focusedName[aria-invalid="true"]{border-color:var(--fd-danger)}
#focusedHint{font-size:12px;line-height:20px;color:var(--fd-muted);margin-top:var(--fd-2);overflow-wrap:anywhere}
.focused-error{font-size:13px;line-height:20px;color:var(--fd-danger);margin-top:var(--fd-3);overflow-wrap:anywhere}
.focused-error[hidden]{display:none}
.focused-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--fd-2);margin-top:var(--fd-7)}
.focused-actions button{display:inline-flex;align-items:center;justify-content:center;gap:var(--fd-2);min-height:var(--fd-row);min-width:88px;padding:10px var(--fd-5);border:1px solid var(--fd-line);border-radius:var(--fd-control-radius);font-size:14px;line-height:22px;font-weight:550;transition:background-color 120ms,border-color 120ms}
.focused-cancel{background:var(--fd-surface);color:var(--fd-ink)}
.focused-cancel:hover{background:#f4f4f0;border-color:#b7b9b0}
.focused-actions .focused-primary,.recipe-save{background:var(--fd-accent);color:#191613;border-color:var(--fd-accent)}
.focused-primary:hover,.recipe-save:hover{background:var(--fd-accent-hover);border-color:var(--fd-accent-hover)}
.focused-actions .focused-primary.is-danger{background:var(--fd-danger);border-color:var(--fd-danger);color:#fff}
.focused-primary.is-danger:hover{background:var(--fd-danger-hover);border-color:var(--fd-danger-hover)}
.focused-dialog button:focus-visible,.recipe-save:focus-visible,.recipe-rename:focus-visible,.recipe-delete:focus-visible,.focus-demo-launch:focus-visible{outline:2px solid var(--fd-focus);outline-offset:3px}
.focused-dialog button:disabled,.save-recipe-row .recipe-save:disabled{opacity:1;color:#686b63;background:#eeefea;border-color:#e0e2da;cursor:not-allowed}
.focused-dialog input:disabled{background:#f4f4f0;color:var(--fd-muted);opacity:1}
.focused-dialog[aria-busy="true"] #focusedSubmit{color:var(--fd-ink);background:var(--fd-accent-soft);border-color:#e9c1b3;cursor:progress}
.focused-dialog[aria-busy="true"] #focusedSubmit.is-danger{color:var(--fd-danger);background:var(--fd-danger-soft);border-color:#efbbc0}
.focused-footnote{font-size:12px;line-height:20px;color:var(--fd-muted);text-align:right;margin-top:var(--fd-3)}
.focused-object{display:grid;gap:var(--fd-1);margin-top:var(--fd-6);padding:var(--fd-4);border:1px solid var(--fd-line);border-radius:var(--fd-control-radius);background:#f8f8f5}
.focused-object>span,.focused-object>small{font-size:12px;line-height:20px;color:var(--fd-muted)}
.focused-object>strong{font-size:15px;line-height:24px;font-weight:600;overflow-wrap:anywhere}
.focused-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:focused-spin .7s linear infinite}
.focus-demo-launch{min-height:var(--fd-row);margin-top:var(--fd-4);padding:var(--fd-3) var(--fd-4);font-size:13px;color:var(--fd-focus);border-color:#e1ad9b;background:var(--fd-accent-soft)}
.focus-demo-launch:hover{background:#f9e2d9;border-color:var(--fd-accent)}
/* Only recipe management rows change; preview grid, tokens and navigation stay intact. */
.save-recipe-row{gap:var(--fd-2);margin-top:var(--fd-6)}
.save-recipe-row .recipe-save{width:100%;min-height:var(--fd-row);font-size:13px;padding:var(--fd-3) var(--fd-4);border-radius:var(--fd-control-radius)}
.saved-recipes>div{min-height:var(--fd-row);gap:var(--fd-1)}
.saved-recipes [data-load]{min-height:var(--fd-row);min-width:0;font-size:12px;align-items:center;gap:var(--fd-2);overflow-wrap:anywhere;color:#4d5a43;text-align:left}
.saved-recipes [data-load] small{flex-shrink:0;color:#62645f;font-size:11px}
.saved-recipes .recipe-rename{min-height:var(--fd-row);min-width:52px;padding:var(--fd-2) var(--fd-1);font-size:12px;color:var(--fd-focus);border-radius:var(--fd-control-radius);flex-shrink:0}
.recipe-rename:hover{background:var(--fd-accent-soft)}
.saved-recipes .recipe-delete{width:32px;height:32px;min-width:32px;margin-left:0;color:var(--fd-danger);border-radius:var(--fd-control-radius)}
.saved-recipes .recipe-delete:hover{background:var(--fd-danger-soft)}
.recipes-empty{margin-top:var(--fd-6);padding:var(--fd-4);border:1px dashed #cdd4c4;border-radius:var(--fd-control-radius);color:var(--fd-muted);font-size:12px;line-height:20px}
.recipes-empty b{font-weight:550;color:#3e4c35}
.recipes-empty p{margin-top:var(--fd-1)}
#recipeDialog .recipe-config,#recipeDialog .recipe-output{padding:var(--fd-7)}
@keyframes focused-spin{to{transform:rotate(360deg)}}
@keyframes focused-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .focused-dialog{max-width:calc(100vw - var(--fd-8));border-radius:var(--fd-radius)}
  .focused-actions button{flex:1;min-width:0}
  .saved-recipes .recipe-delete{width:var(--fd-row);height:var(--fd-row);min-width:var(--fd-row)}
}
@media(prefers-reduced-motion:reduce){.focused-dialog,.focused-spinner{animation:none}.focused-actions button{transition:none}}
.reduce-motion .focused-dialog,.reduce-motion .focused-spinner{animation:none}
.reduce-motion .focused-actions button{transition:none}

.p-dialog .modal-demo b{color:#191613}