/* Premium UX shell (tools roadmap Phase 1): result toolbar, favourites row, dialogs,
   drop target, motion tokens. Uses site.css / tools-premium.css tokens, so it follows
   light and dark mode. 44px targets, visible focus, no layout shift (the bar is part of
   the stage from the first paint of the script; nothing is inserted above the result). */
:root{--m-fast:150ms;--m-panel:250ms;--m-ease:cubic-bezier(.2,.8,.2,1)}
.ux-favrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:8px 0 0}
.ux-fav,.ux-keys,.ux-btn{font:inherit;font-size:.9375rem;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--border-2,#d2d2d7);background:var(--bg,#fff);color:var(--text,#1d1d1f);cursor:pointer;transition:background var(--m-fast) var(--m-ease),border-color var(--m-fast) var(--m-ease)}
.ux-fav[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.ux-keys{width:44px;padding:0;font-weight:600}
.ux-mylink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:.9375rem}
.ux-fav:hover,.ux-keys:hover,.ux-btn:hover{background:var(--bg-2,#f5f5f7)}
.ux-fav:focus-visible,.ux-keys:focus-visible,.ux-btn:focus-visible,.ux-q:focus-visible,.ux-x:focus-visible{outline:none;box-shadow:var(--focus,0 0 0 3px #0071e3)}
.ux-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--border,#e5e5ea)}
.ux-live{flex:1 1 100%;margin:0;min-height:1.4em;font-size:.875rem;color:var(--text-2,#424245)}
.ux-live.ux-ok::before{content:"✓ ";color:var(--ok,#1a7f37);display:inline-block;animation:ux-pop var(--m-panel) var(--m-ease)}
@keyframes ux-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ux-droppable.ux-drag{outline:3px dashed var(--accent);outline-offset:-10px}
.ux-dlg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:10vh 12px 12px;animation:ux-fade var(--m-panel) var(--m-ease)}
@keyframes ux-fade{from{opacity:0}to{opacity:1}}
.ux-box{width:min(560px,100%);max-height:80vh;overflow:auto;background:var(--surface-raised,#fff);color:var(--text,#1d1d1f);border-radius:20px;box-shadow:var(--elev-3,0 24px 64px rgba(0,0,0,.2));padding:16px 20px 20px;box-sizing:border-box}
.ux-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ux-head h2{font-size:1.125rem;margin:0}
.ux-x{font:inherit;font-size:1.5rem;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;border-radius:50%}
.ux-q{width:100%;box-sizing:border-box;font:inherit;font-size:16px;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--border-2,#d2d2d7);background:var(--bg,#fff);color:inherit;margin:8px 0}
.ux-list{list-style:none;margin:0;padding:0}
.ux-list li a{display:block;padding:10px 12px;border-radius:12px;color:inherit;text-decoration:none;min-height:44px;box-sizing:border-box}
.ux-list li a strong{display:block;font-size:1rem}
.ux-list li a span{display:block;font-size:.8125rem;color:var(--text-3,#6e6e73);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-list li[aria-selected="true"] a,.ux-list li a:hover{background:var(--bg-2,#f5f5f7)}
.ux-empty{padding:12px;color:var(--text-2,#424245)}
.ux-keylist{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:12px 0}
.ux-keylist dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem;background:var(--bg-2,#f5f5f7);border-radius:6px;padding:2px 8px;justify-self:start}
.ux-keylist dd{margin:0}
.ux-small{font-size:.8125rem;color:var(--text-3,#6e6e73)}
.ux-code{width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;border-radius:12px;border:1px solid var(--border-2,#d2d2d7);padding:10px;background:var(--bg-2,#f5f5f7);color:inherit;margin:8px 0 12px}
.ux-my ul{list-style:none;padding:0;margin:0}
.ux-my li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border,#e5e5ea)}
.ux-my li a{font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.ux-my .ux-when{font-size:.8125rem;color:var(--text-3,#6e6e73);flex:1}
.ux-my .ux-rm{margin-left:auto}
/* numbers settle in without delaying them */
.tp-stage [data-out] .cc-stat strong{animation:ux-tick var(--m-panel) var(--m-ease)}
@keyframes ux-tick{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ux-dlg,.ux-live.ux-ok::before,.tp-stage [data-out] .cc-stat strong{animation:none}.ux-fav,.ux-keys,.ux-btn{transition:none}}
body.is-embed .ux-favrow,body.is-embed .ux-bar{display:none}
@media print{.ux-favrow,.ux-bar,.ux-dlg{display:none}}
/* password generator: characters vs passphrase panels */
[data-webtool="password"]:not(.is-phrase) .pw-phrase{display:none}
[data-webtool="password"].is-phrase .pw-chars{display:none}
.wt-checks{border:0;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.wt-checks legend{font-weight:600;margin-bottom:4px;padding:0}
.ux-presets{margin:4px 0 8px}
.ux-now{align-items:center;margin-bottom:8px}
.ux-nowline{margin:0;flex:1 1 100%;font-variant-numeric:tabular-nums}
.ux-more{margin:8px 0}
.ux-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.ux-lapbox{overflow-x:auto;max-height:320px;overflow-y:auto}
.ux-laps{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.ux-laps th,.ux-laps td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border,#e5e5ea)}
.ux-laps tr.is-fast td{color:var(--ok,#1a7f37);font-weight:600}
.ux-laps tr.is-slow td{color:var(--bad,#c4161c)}
@media (max-width:400px){.ux-favrow{flex-wrap:nowrap;gap:4px}.ux-fav,.ux-keys{font-size:.8125rem;min-height:40px;padding:0 10px}.ux-keys{width:40px;padding:0}.ux-mylink{min-height:40px;font-size:.8125rem;padding:0 4px;white-space:nowrap}.ux-fav{white-space:nowrap}}

/* dice roller: quick dice + history; electricity: appliance rows */
.dice-quick .btn{padding:.35em .7em}
.dice-history h3{font-size:1rem;margin:1rem 0 .3rem}
.dice-history ol{padding-left:1.4em;margin:.3em 0 .6em}
.dice-history li span{opacity:.75;font-size:.9em;overflow-wrap:anywhere}
.wt-stats s{opacity:.55}
.el-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-bottom:.5rem}
.el-row label{flex:1 1 6.5rem;min-width:0}
.el-row label:first-child{flex:2 1 12rem}
.el-row select,.el-row input{width:100%;max-width:100%;box-sizing:border-box}

/* QA P3-14: dark ux buttons match the tool's own dark buttons (#2c2c2e), not pure black */
@media (prefers-color-scheme: dark){
  .ux-fav,.ux-keys,.ux-btn{background:#2c2c2e;border-color:#48484a;color:#f5f5f7}
  .ux-fav:hover,.ux-keys:hover,.ux-btn:hover{background:#3a3a3c}
}
.ux-theme{font-size:1.05rem}
.ux-undo{font:inherit;font-size:.875rem;min-height:32px;padding:0 12px;margin-left:4px;border-radius:999px;border:1px solid var(--border-2,#d2d2d7);background:transparent;color:var(--accent,#0071e3);cursor:pointer}
.tool h2.wt-h3,.ps-send h2.wt-h3{font-size:1.0625rem;line-height:1.35;margin:1rem 0 .4rem}
/* per-field undo / redo (roadmap checkpoint 4) */
.ux-hist{display:flex;gap:6px;justify-content:flex-end;margin:4px 0 0}
.ux-hist[hidden]{display:none}
.ux-histbtn{font:inherit;font-size:.875rem;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;border:1px solid var(--border-2,#d2d2d7);background:transparent;color:var(--accent,#0071e3);cursor:pointer}
.ux-histbtn:disabled{color:var(--text-3,#6e6e73);cursor:default;opacity:.7}
.ux-keyhead{font-size:1rem;margin:1rem 0 .4rem}

.ux-btn:disabled{opacity:.5;cursor:not-allowed}