/* Shared motion language: restrained, short, and never a prerequisite to act. */
:root { --dfm-ease: cubic-bezier(.2, .8, .2, 1); --dfm-short: 180ms; }

/* Only a placed pill needs the group as its box; on phones the page nav stays fixed to the bottom. */
.dfm-control-ready { position: relative; isolation: isolate; }
.dfm-control > :is(a, button) { position: relative; z-index: 1; }
.dfm-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); pointer-events: none; transform: translate(var(--dfm-pill-x, 0px), var(--dfm-pill-y, 0px)); }
.dfm-pill-settled { transition: transform 240ms var(--dfm-ease), width 240ms var(--dfm-ease), height 240ms var(--dfm-ease); }
html:not([data-design="classic"]) .ov-seg.dfm-control-ready button[aria-pressed="true"] { background: transparent; box-shadow: none; }
@media (min-width: 901px) {
  html:not([data-design="classic"]) .sidebar .nav.dfm-control-ready a.active { background: transparent; box-shadow: none; }
  .nav .dfm-pill { border-radius: 9px; }
}
@media (max-width: 900px) { .nav > .dfm-pill { display: none; } }
html[data-design="classic"] .nav > .dfm-pill { display: none; }

/* Native close() stays synchronous, including Escape, submit and backdrop
   exits. Supporting browsers retain only the painted layer while it fades. */
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  dialog:is(.modal, .sheet, .palette) {
    --dfm-dialog-away: translateY(8px) scale(.985);
    opacity: 0; transform: var(--dfm-dialog-away);
    transition: opacity var(--dfm-short) var(--dfm-ease), transform var(--dfm-short) var(--dfm-ease), display var(--dfm-short) allow-discrete, overlay var(--dfm-short) allow-discrete;
  }
  dialog.sheet { --dfm-dialog-away: translateX(24px); }
  dialog.palette { --dfm-dialog-away: translateY(-8px) scale(.985); }
  dialog:is(.modal, .sheet, .palette)[open] { opacity: 1; transform: none; animation: none; }
  dialog:is(.modal, .sheet, .palette):not([open]) { pointer-events: none; }
  dialog:is(.modal, .sheet, .palette)::backdrop {
    opacity: 0;
    transition: opacity var(--dfm-short) var(--dfm-ease), display var(--dfm-short) allow-discrete, overlay var(--dfm-short) allow-discrete;
  }
  dialog:is(.modal, .sheet, .palette)[open]::backdrop { opacity: 1; }
  dialog:is(.modal, .sheet, .palette):not([open])::backdrop { pointer-events: none; }
  @starting-style {
    dialog:is(.modal, .sheet, .palette)[open] { opacity: 0; transform: var(--dfm-dialog-away); }
    dialog:is(.modal, .sheet, .palette)[open]::backdrop { opacity: 0; }
  }
  @media (max-width: 640px) { dialog:is(.sheet, .modal) { --dfm-dialog-away: translateY(24px); } }
}

.dfm-glyph { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast:has(> .dfm-success-mark) { display: flex; align-items: center; gap: 11px; }
.dfm-success-mark { display: inline-grid; place-items: center; flex: none; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--green-dot) 55%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--green-dot) 16%, transparent); color: #8ee1a3; animation: dfm-mark-in 180ms var(--dfm-ease); }
.dfm-success-mark .dfm-glyph { width: 18px; height: 18px; stroke-width: 2.2; }
.dfm-success-mark .dfm-check-path, .dfm-stage-changed .dfm-check-path { stroke-dasharray: 22; stroke-dashoffset: 0; animation: dfm-check-in 280ms var(--dfm-ease) both; }
@keyframes dfm-check-in { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes dfm-mark-in { from { opacity: .3; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

.dropzone { transition: border-color var(--dfm-short), background var(--dfm-short), box-shadow var(--dfm-short); }
.dropzone > :is(.dropzone-icons, .file-badge) { transition: transform var(--dfm-short) var(--dfm-ease); }
.dropzone[data-dfm-drag] { border-color: var(--accent); border-style: solid; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent); }
.dropzone:is([data-dfm-drag], :focus-within) > :is(.dropzone-icons, .file-badge) { transform: translateY(-4px); }
.drop-overlay:not([hidden]) .drop-icon { animation: dfm-upload-in 220ms var(--dfm-ease) both; }
@keyframes dfm-upload-in { from { opacity: .4; transform: translateY(5px) scale(.95); } to { opacity: 1; transform: none; } }
.stepper li, .stepper li::before, .stepper li::after { transition: color var(--dfm-short), border-color var(--dfm-short), background var(--dfm-short), box-shadow var(--dfm-short); }
.batch-mark[data-dfm-stage] { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.batch-mark[data-dfm-stage] .dfm-glyph { width: 17px; height: 17px; }
.batch-mark:is([data-dfm-stage="ready"], [data-dfm-stage="saved"]) { color: var(--green); background: var(--green-bg); }

/* Only genuinely actionable overview cards receive a light treatment. */
html:not([data-design="classic"]) :is(button.ov-card, a.ov-card[href]) { position: relative; isolation: isolate; transition: transform 180ms var(--dfm-ease), box-shadow 180ms var(--dfm-ease), border-color 180ms; }
html:not([data-design="classic"]) :is(button.ov-card, a.ov-card[href])::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(240px circle at var(--dfm-light-x, 50%) var(--dfm-light-y, 25%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 23%, transparent); transition: opacity 180ms; }
html:not([data-design="classic"]) :is(button.ov-card, a.ov-card[href]):focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-design="classic"]) :is(button.ov-card, a.ov-card[href])[data-dfm-lit]::after { opacity: 1; }
}
@media (hover: none) {
  html:not([data-design="classic"]) .ov-tile:hover { transform: none; box-shadow: var(--ov-card-shadow); }
  html:not([data-design="classic"]) .ov-tile:active { border-color: var(--accent-line); }
}
/* Payments statement: connectors sit behind the bars and reach under them. */
.wf { position: relative; }
.wf-row { position: relative; z-index: 1; }
.dfm-wf-links { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dfm-wf-links line { stroke: var(--ink-4); stroke-width: 1.5; stroke-dasharray: 3 4; }
html:not([data-design="classic"]) .wf-row .wf-track rect.dfm-wf-run { fill: color-mix(in srgb, var(--ink-4) 55%, transparent); }
html:not([data-design="classic"]) .wf-track text.dfm-wf-balance { font-size: 12px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.wf-row.total .dfm-wf-liquid { fill: var(--flow-paid); }
.wf-row.total .dfm-wf-liquid.back { opacity: .45; }
.wf-row.total rect[data-dfm-dim] { opacity: .28; transition: opacity .2s; }
html:not([data-design="classic"]) .wf-row.total rect.dfm-wf-hi { fill: var(--flow-paid); }
.dfm-wf-tip { position: absolute; z-index: 2; padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 700; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); font-variant-numeric: tabular-nums; }
.dfm-wf-tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); }
/* The line to the selected period, and two rings that leave its dot once.
   It starts at the first dot and spans --reach of the rail's --n periods. */
.sp-progress { position: absolute; left: calc(50% / var(--n, 12)); width: calc(100% * var(--reach, 0) / var(--n, 12)); top: 11px; height: 2px; border-radius: 2px; background: var(--flow-paid); box-shadow: 0 0 10px color-mix(in srgb, var(--flow-paid) 55%, transparent); pointer-events: none; }
.sp-period i { position: relative; }
.sp-period i::before, .sp-period i::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--flow-paid); border-radius: 50%; opacity: 0; pointer-events: none; }
.sp-period.dfm-ripple i::after { animation: dfm-ripple-outer .8s var(--dfm-ease); }
.sp-period.dfm-ripple i::before { animation: dfm-ripple-inner .8s .12s var(--dfm-ease); }
@keyframes dfm-ripple-outer { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
@keyframes dfm-ripple-inner { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }
.sp-seg.dfm-unfold { animation: dfm-unfold .6s var(--dfm-ease) backwards; animation-delay: var(--dfm-d, 0ms); }
@keyframes dfm-unfold { from { clip-path: inset(0 100% 0 0 round 14px); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0 round 14px); transform: none; } }
@media (max-width: 760px) { .dfm-wf-links { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sp-period i::before, .sp-period i::after, .sp-seg.dfm-unfold, .wf-row.total rect[data-dfm-dim],
  .dfm-pill, .dfm-success-mark, .dfm-check-path, .dfm-stage-changed, .dropzone, .dropzone *, .drop-icon, .stepper li, .stepper li::before, .stepper li::after,
  dialog:is(.modal, .sheet, .palette), dialog:is(.modal, .sheet, .palette)::backdrop,
  html:not([data-design="classic"]) :is(button.ov-card, a.ov-card[href]), html:not([data-design="classic"]) :is(button.ov-card, a.ov-card[href])::after { animation: none !important; transition: none !important; }
  .dropzone:is([data-dfm-drag], :focus-within) > :is(.dropzone-icons, .file-badge), html:not([data-design="classic"]) .ov-tile:hover { transform: none; }
}
@media print { .dfm-pill, .dfm-success-mark, .ov-card::after { display: none !important; } }