/* Motion: transitions from transitions.dev (modal, dropdown, toast, accordion, sliding tabs, soft text swap), copied from the skill's snippets and
   wired to this app. Every block keeps its prefers-reduced-motion guard. Only colours of the tabs are mapped to this app's theme tokens. */
:root {
  --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms; --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99; --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms; --modal-close-dur: 150ms; --modal-scale: 0.96; --modal-scale-close: 0.96; --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toast-open: 350ms; --toast-close: 250ms; --toast-distance: 16px; --toast-blur: 2px; --toast-scale: 0.97; --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --acc-expand: 250ms; --acc-collapse: 250ms; --acc-chevron: 250ms; --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: 250ms; --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-soft-dur: 200ms; --text-soft-blur: 2px; --text-soft-ease: ease-in-out; --text-soft-resize-dur: 240ms; --text-soft-resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- modal ---------- */
.t-modal { transform-origin: center; transform: scale(var(--modal-scale)); opacity: 0; pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease); will-change: transform, opacity; }
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing { transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease); }
.modal-back { opacity: 0; transition: opacity var(--modal-close-dur) var(--modal-ease); }
.modal-back.is-in { opacity: 1; transition-duration: var(--modal-open-dur); }
@media (prefers-reduced-motion: reduce) { .t-modal, .modal-back { transition: none !important; } }
.cf-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* ---------- dropdown (navigation menus, "More graphs") ---------- */
.t-dropdown { transform-origin: top left; transform: scale(var(--dropdown-pre-scale)); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease), visibility 0s linear var(--dropdown-close-dur); will-change: transform, opacity; }
.t-dropdown[data-origin="top-right"] { transform-origin: top right; }
.t-dropdown[data-origin="top-center"] { transform-origin: top center; }
.t-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.t-dropdown.is-closing { transform: scale(var(--dropdown-closing-scale)); opacity: 0; pointer-events: none;
  transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease); }
@media (prefers-reduced-motion: reduce) { .t-dropdown { transition: none !important; } }
.menu > .items.t-dropdown { display: block; }
.menu.open > .items.t-dropdown:not(.is-open) { display: block; }

/* ---------- toast ---------- */
.t-toast { opacity: 0; transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); filter: blur(var(--toast-blur)); will-change: transform, opacity, filter;
  transition: opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease); }
.t-toast.is-open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
  transition: opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease); }
@media (prefers-reduced-motion: reduce) { .t-toast { transition: none !important; } }

/* ---------- accordion (PON outage sections) ---------- */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc-chevron { display: inline-flex; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce) { .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; } }

/* ---------- sliding tabs (OLT page, Graphs) ---------- */
.t-tabs { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 3px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); margin-bottom: 1rem; }
.t-tab { position: relative; appearance: none; border: 0; background: transparent; min-height: 36px; padding: 4px 14px; color: var(--mute); cursor: pointer; border-radius: 11px; z-index: 1; font-weight: 500;
  transition: color var(--tabs-dur) var(--tabs-ease); }
.t-tab:not([aria-selected="true"]):hover, .t-tab[aria-selected="true"] { color: var(--text); background: transparent; }
.t-tabs-pill { position: absolute; top: 3px; left: 0; height: 36px; width: 0; background: color-mix(in srgb, var(--blue) 24%, var(--panel-solid)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 55%, transparent) inset, 0 3px 10px rgba(0,0,0,.18);
  border-radius: 11px; transform: translateX(0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease), top var(--tabs-dur) var(--tabs-ease), height var(--tabs-dur) var(--tabs-ease); will-change: transform, width; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .t-tabs-pill, .t-tab { transition: none !important; } }

/* ---------- soft text swap (numbers that change in place) ---------- */
.t-text-soft { display: inline-grid; justify-items: var(--text-soft-align, start); transition: width var(--text-soft-resize-dur) var(--text-soft-resize-ease); }
.t-text-soft > span { grid-area: 1 / 1; white-space: pre; transition: filter var(--text-soft-dur) var(--text-soft-ease), opacity var(--text-soft-dur) var(--text-soft-ease); }
.t-text-soft-new { opacity: 0; filter: blur(var(--text-soft-blur)); }
.t-text-soft.is-swapping .t-text-soft-old { opacity: 0; filter: blur(var(--text-soft-blur)); }
.t-text-soft.is-swapping .t-text-soft-new { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .t-text-soft, .t-text-soft > span { transition: none !important; } }