/* Fraimora interaction layer · styles for window.fxUI (ui.js).
   Tokens only (designguides/tokens.css). Buttons (.btn*) and .fx-seg belong to the app;
   base.css carries them for pages without the app styles.
   Load order: tokens.css, (base.css), app styles, ui.css. */

/* ---------- icons ---------- */
.ph{width:var(--fx-icon);height:var(--fx-icon);fill:currentColor;flex:none;display:block}
.ph.s12{width:var(--fx-icon-tag);height:var(--fx-icon-tag)}
.ph.s20{width:var(--fx-icon-empty);height:var(--fx-icon-empty)}

/* ---------- status button: .btn + fxUI.statusButton ---------- */
.btn.fx-sb{gap:0;transition:background-color var(--fx-dur-swap) var(--fx-ease-settle),border-color var(--fx-dur-swap) var(--fx-ease-settle),color var(--fx-dur-swap) var(--fx-ease-settle),transform var(--fx-dur-tick) var(--fx-ease)}
.btn.fx-sb[aria-busy]{cursor:progress}
.fx-sb-slot{position:relative;display:inline-block;width:0;height:var(--fx-icon);margin-right:0;flex:none;transition:width var(--fx-dur-move) var(--fx-ease-settle),margin var(--fx-dur-move) var(--fx-ease-settle)}
.fx-sb.has-ic .fx-sb-slot,.fx-sb:not([data-status="idle"]) .fx-sb-slot{width:var(--fx-icon);margin-right:var(--fx-space-2)}
.fx-sb-ic{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.6);filter:blur(3px);
  transition:opacity var(--fx-dur-swap) var(--fx-ease-settle),transform var(--fx-dur-move) var(--fx-ease-settle),filter var(--fx-dur-swap) var(--fx-ease-settle)}
.fx-sb[data-status="idle"] [data-s="idle"],.fx-sb[data-status="pending"] [data-s="pending"],
.fx-sb[data-status="success"] [data-s="success"],.fx-sb[data-status="error"] [data-s="error"]{opacity:1;transform:none;filter:none}
.fx-sb-ic .ph{width:100%;height:100%}
.btn.fx-sb[data-status="success"],.btn.fx-sb[data-status="success"]:hover{background-color:var(--fx-ok-strong);border-color:var(--fx-ok-strong);color:var(--fx-ok-strong-fg)}
.btn.fx-sb.fx-sb--soft[data-status="success"],.btn.fx-sb.fx-sb--soft[data-status="success"]:hover{background-color:var(--fx-ok-bg);border-color:var(--fx-ok-bd);color:var(--fx-ok-fg)}
.btn.fx-sb[data-status="error"],.btn.fx-sb[data-status="error"]:hover{background-color:var(--fx-err-bg);border-color:var(--fx-err-bd);color:var(--fx-err-fg)}

/* ---------- motion glyphs ---------- */
.fx-spin{display:block;width:12px;height:12px;border-radius:var(--fx-r-round);border:1.5px solid currentColor;border-top-color:transparent;opacity:.85;animation:fx-spin var(--fx-dur-spin) linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.fx-check{width:100%;height:100%;overflow:visible}
.fx-check path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.fx-sb[data-status="success"] .fx-check path,.fx-drawn .fx-check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--fx-dur-draw) var(--fx-ease-settle) var(--fx-delay-draw)}
@media (prefers-reduced-motion: reduce){.fx-spin{animation:none}}

/* ---------- text morph and number roll ---------- */
.fx-tm{position:relative;display:inline-block;white-space:nowrap;vertical-align:bottom}
.fx-tm .ch{display:inline-block;white-space:pre}
.fx-tm .gh{position:absolute;top:0;pointer-events:none}
.fx-roll{position:relative;display:inline-block;white-space:nowrap;vertical-align:bottom;overflow:hidden;font-variant-numeric:tabular-nums}
.fx-roll .rv{display:inline-block}
.fx-roll .rg{position:absolute;left:0;top:0;pointer-events:none}
.fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- fold: <div data-fold="open"><div>content</div></div> ---------- */
[data-fold]{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--fx-dur-fold) var(--fx-ease-settle)}
[data-fold]>*{min-height:0;overflow:hidden;transition:opacity var(--fx-dur-swap) var(--fx-ease-settle) var(--fx-delay-sm),filter var(--fx-dur-swap) var(--fx-ease-settle) var(--fx-delay-sm)}
[data-fold="closed"]{grid-template-rows:0fr}
[data-fold="closed"]>*{opacity:0;filter:blur(4px);transition-duration:var(--fx-dur-exit);transition-delay:0s}

/* ---------- floating surfaces: popover, menu level, confirm, dialog ---------- */
.fx-pop{position:fixed;z-index:var(--fx-z-popover);top:0;left:0;background:var(--fx-surface);color:var(--fx-text);border:1px solid var(--fx-border);border-radius:var(--fx-r-md);box-shadow:var(--fx-shadow-pop);padding:var(--fx-space-1)}
.fx-pop[hidden]{display:none!important}
.fx-row{display:flex;gap:var(--fx-space-2);align-items:center;justify-content:flex-end}
.fx-confirm{width:min(290px,calc(100vw - 16px));padding:var(--fx-space-3) var(--fx-space-4)}
.fx-confirm b{display:block;font-size:var(--fx-fs-small);font-weight:700;color:var(--fx-text);margin-bottom:var(--fx-space-1)}
.fx-confirm p{font-size:var(--fx-fs-small);color:var(--fx-text-muted);line-height:var(--fx-lh-small)}
.fx-confirm .fx-row{margin-top:var(--fx-space-3)}
.fx-dialog{z-index:var(--fx-z-dialog);inset:0;margin:auto;height:fit-content;width:min(400px,calc(100vw - 32px));padding:var(--fx-pad-card);border-radius:var(--fx-r-lg)}
.fx-dialog b{font-size:var(--fx-fs-h2)}
.fx-dialog .fx-row{margin-top:var(--fx-space-4)}
.fx-scrim{position:fixed;inset:0;z-index:calc(var(--fx-z-dialog) - 1);background:var(--fx-scrim);opacity:0;pointer-events:none;transition:opacity var(--fx-dur-fade) var(--fx-ease)}
.fx-scrim.on{opacity:1;pointer-events:auto}

/* ---------- menu: levels cascade, each laid over the previous one's edge ---------- */
.fx-menu{min-width:224px}
.fx-menu.fx-sub{min-width:196px}
.fx-mi{display:flex;align-items:center;gap:var(--fx-space-2);width:100%;height:32px;padding:0 var(--fx-space-2);border:none;background:transparent;border-radius:var(--fx-r-sm);font:500 var(--fx-fs-small)/1 var(--fx-font);color:var(--fx-text-2);text-align:left;white-space:nowrap;cursor:pointer;transition:background-color var(--fx-dur) var(--fx-ease),color var(--fx-dur) var(--fx-ease)}
.fx-mi:hover,.fx-mi:focus-visible,.fx-mi.open{background:var(--fx-surface-sunken);color:var(--fx-text);outline:none}
.fx-mi .ph{color:var(--fx-text-muted)}
.fx-mi:hover .ph,.fx-mi.open .ph{color:var(--fx-text)}
.fx-mi .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fx-mi .hint{font-family:var(--fx-mono);font-size:var(--fx-fs-label);color:var(--fx-text-faint)}
.fx-mi .sub-caret{color:var(--fx-text-faint)}
.fx-mi.danger{color:var(--fx-err-fg)}
.fx-mi.danger .ph{color:var(--fx-err-solid)}
.fx-mi.danger:hover{background:var(--fx-err-bg)}
.fx-msep{height:1px;background:var(--fx-border-hair);margin:var(--fx-space-1) 2px}
.fx-mconfirm{padding:var(--fx-space-2) var(--fx-space-2) var(--fx-space-2);font-size:var(--fx-fs-small);color:var(--fx-text-muted);line-height:var(--fx-lh-small);max-width:240px}
.fx-mconfirm b{display:block;color:var(--fx-text);margin-bottom:2px}
.fx-mconfirm .fx-row{margin-top:var(--fx-space-3)}

/* ---------- date range ---------- */
.fx-dr{width:min(460px,calc(100vw - 16px));padding:0;display:grid;grid-template-columns:150px minmax(0,1fr);overflow:hidden}
.fx-dr-presets{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px var(--fx-space-2);border-right:1px solid var(--fx-border-hair);background:var(--fx-surface-2)}
.fx-dr-presets .pi{position:absolute;left:var(--fx-space-2);right:var(--fx-space-2);top:0;height:30px;border-radius:var(--fx-r-sm);background:var(--fx-surface);box-shadow:0 0 0 1px var(--fx-border);pointer-events:none;transition:transform var(--fx-dur-move) var(--fx-ease-settle),opacity var(--fx-dur-fade) var(--fx-ease)}
.fx-dr-presets button{position:relative;z-index:1;height:30px;padding:0 9px;border:none;background:transparent;border-radius:var(--fx-r-sm);text-align:left;font:600 12px/1 var(--fx-font);color:var(--fx-text-muted);white-space:nowrap;cursor:pointer;transition:color var(--fx-dur) var(--fx-ease)}
.fx-dr-presets button[aria-pressed="true"],.fx-dr-presets button:hover{color:var(--fx-text)}
.fx-dr-presets button:focus-visible{outline:var(--fx-focus-outline);outline-offset:-2px}
.fx-dr-cal{padding:var(--fx-space-3) 14px 6px;--cell:36px;min-width:0}
.fx-dr-head{display:flex;align-items:center;gap:6px;margin-bottom:var(--fx-space-2)}
.fx-dr-head .t{flex:1;font-size:13px;font-weight:700;letter-spacing:-0.015em;color:var(--fx-text)}
.fx-dr-dows,.fx-dr-row{display:grid;grid-template-columns:repeat(7,var(--cell))}
.fx-dr-dows span{height:22px;display:grid;place-items:center;font:500 10px/1 var(--fx-mono);color:var(--fx-text-faint)}
.fx-dr-body{position:relative;overflow:hidden}
.fx-dr-row{position:relative;height:var(--cell)}
.fx-dr-band{position:absolute;top:3px;bottom:3px;left:0;width:0;background:var(--fx-accent-tint);opacity:0;pointer-events:none;
  transition:left var(--fx-dur-move) var(--fx-ease-settle),width var(--fx-dur-move) var(--fx-ease-settle),opacity var(--fx-dur-fade) var(--fx-ease),border-radius var(--fx-dur-swap) var(--fx-ease-settle)}
.fx-dr-band.capL{border-top-left-radius:var(--fx-r-round);border-bottom-left-radius:var(--fx-r-round)}
.fx-dr-band.capR{border-top-right-radius:var(--fx-r-round);border-bottom-right-radius:var(--fx-r-round)}
.fx-dr-day{position:relative;z-index:1;width:var(--cell);height:var(--cell);border:none;background:transparent;display:grid;place-items:center;font:500 12px/1 var(--fx-mono);color:var(--fx-text);border-radius:var(--fx-r-round);cursor:pointer;font-variant-numeric:tabular-nums}
.fx-dr-day::before{content:"";position:absolute;inset:3px;border-radius:var(--fx-r-round);z-index:-1;transition:background-color var(--fx-dur-fade) var(--fx-ease)}
.fx-dr-day:hover::before{background:var(--fx-surface-sunken)}
.fx-dr-day.out{color:var(--fx-border-strong)}
.fx-dr-day.end{color:var(--fx-on-accent);font-weight:600}
.fx-dr-day.end::before{background:var(--fx-accent)}
.fx-dr-day.today::after{content:"";position:absolute;bottom:6px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:var(--fx-r-round);background:var(--fx-accent)}
.fx-dr-day.end.today::after{background:var(--fx-on-accent)}
.fx-dr-day:focus-visible{outline:var(--fx-focus-outline);outline-offset:-2px}
.fx-dr-foot{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--fx-border-hair);flex-wrap:wrap}
.fx-dr-foot .rng{flex:1;min-width:0;font:500 11.5px/1.4 var(--fx-mono);color:var(--fx-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-dr-foot .rng b{font-weight:600;color:var(--fx-text)}
@media (max-width:480px){
  .fx-dr{grid-template-columns:minmax(0,1fr)}
  .fx-dr-presets{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--fx-border-hair)}
  .fx-dr-presets .pi{display:none}
  .fx-dr-presets button{flex:none;border:1px solid var(--fx-border);background:var(--fx-surface)}
  .fx-dr-presets button[aria-pressed="true"]{border-color:var(--fx-accent);color:var(--fx-accent-text);background:var(--fx-accent-tint)}
  .fx-dr-foot .rng{flex-basis:100%}
}

/* ---------- toasts ---------- */
.fx-toasts{position:fixed;z-index:var(--fx-z-toast);right:var(--fx-space-4);bottom:calc(var(--fx-space-4) + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 32px));height:0}
.fx-toast{position:absolute;right:0;bottom:0;width:100%;background:var(--fx-surface);color:var(--fx-text);border:1px solid var(--fx-border-control);border-radius:var(--fx-r-md);box-shadow:var(--fx-shadow-pop);padding:var(--fx-space-3) 14px 13px;display:flex;gap:11px;align-items:flex-start;overflow:hidden;
  transition:transform var(--fx-dur-move) var(--fx-ease-settle),opacity var(--fx-dur-swap) var(--fx-ease-settle),filter var(--fx-dur-swap) var(--fx-ease-settle)}
.fx-toast .t-ic{position:relative;width:var(--fx-icon);height:var(--fx-icon);flex:none;margin-top:2px}
.fx-toast .t-ic>*{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity var(--fx-dur-swap) var(--fx-ease-settle),transform var(--fx-dur-move) var(--fx-ease-settle)}
.fx-toast[data-k="loading"] .k-loading,.fx-toast[data-k="ok"] .k-ok,.fx-toast[data-k="err"] .k-err{opacity:1;transform:none}
.fx-toast .k-ok{color:var(--fx-ok-solid)} .fx-toast .k-err{color:var(--fx-err-solid)} .fx-toast .k-loading{color:var(--fx-text-muted)}
.fx-toast[data-k="ok"] .fx-check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--fx-dur-draw) var(--fx-ease-settle) var(--fx-delay-draw)}
.fx-toast .t-b{min-width:0;flex:1;transition:opacity var(--fx-dur-swap) var(--fx-ease)}
.fx-toast b{display:block;font-size:13px;font-weight:700;letter-spacing:-0.015em}
.fx-toast p{font-size:12px;color:var(--fx-text-muted);line-height:1.5;margin-top:2px}
.fx-toast .t-act{margin-top:var(--fx-space-2);display:flex;gap:6px}
.fx-toast .t-x{border:none;background:transparent;color:var(--fx-text-faint);border-radius:var(--fx-r-xs);width:24px;height:24px;display:grid;place-items:center;flex:none;margin:-4px -8px 0 0;cursor:pointer}
.fx-toast .t-x:hover{background:var(--fx-surface-sunken);color:var(--fx-text)}
.fx-toast .t-timer{position:absolute;left:14px;right:14px;bottom:0;height:1px;background:var(--fx-border-strong);transform-origin:left}

/* ---------- tooltip: <button data-tip="Collapse sidebar"> ---------- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;z-index:var(--fx-z-tip);left:calc(100% + 8px);top:50%;transform:translate(-3px,-50%);padding:var(--fx-space-1) var(--fx-space-2);border-radius:var(--fx-r-sm);background:var(--fx-tip-bg);color:var(--fx-tip-fg);font:600 11.5px/1.3 var(--fx-font);white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity var(--fx-dur-tip) var(--fx-ease),transform var(--fx-dur-tip) var(--fx-ease)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(0,-50%);transition-delay:var(--fx-tip-delay)}
[data-tip-pos="bottom"]::after{left:50%;top:calc(100% + 6px);transform:translate(-50%,-3px)}
[data-tip-pos="bottom"]:hover::after,[data-tip-pos="bottom"]:focus-visible::after{transform:translate(-50%,0)}

/* ---------- drag: classes the editor's interact.js handlers toggle ---------- */
.fx-lift{z-index:5;box-shadow:var(--fx-shadow-lift);border-color:var(--fx-border-strong);cursor:grabbing;transition:box-shadow var(--fx-dur) var(--fx-ease)}
.fx-shift{transition:transform var(--fx-dur-slow) var(--fx-ease-settle)}
.fx-refuse{outline:1px solid var(--fx-err-solid);background-color:var(--fx-err-bg)}

/* ---------- drawer and the travelling indicator ---------- */
.fx-drawer{position:fixed;z-index:var(--fx-z-dialog);top:0;right:0;bottom:0;width:min(360px,90vw);background:var(--fx-surface);border-left:1px solid var(--fx-border);box-shadow:var(--fx-shadow-pop);
  transform:translateX(102%);visibility:hidden;transition:transform var(--fx-dur-page) var(--fx-ease-settle),visibility 0s linear var(--fx-dur-page)}
.fx-drawer.on{transform:none;visibility:visible;transition:transform var(--fx-dur-page) var(--fx-ease-settle),visibility 0s}
.fx-ind{position:absolute;left:0;right:0;top:0;border-radius:var(--fx-r-sm);background:var(--fx-accent-tint);pointer-events:none;transition:transform var(--fx-dur-slide) var(--fx-ease-slide),height var(--fx-dur-slide) var(--fx-ease-slide)}