/* Public overrides inherit from the theme; defaults are resolved at each use. */
.flare-gantt {
    --_line: var(--flare-gantt-line, var(--flare-color-outline-variant));
    --_line-width: var(--flare-gantt-line-width, var(--flare-border-width));
    position: relative;
    min-width: 0;
    background: var(--flare-gantt-surface, var(--flare-color-surface));
    color: var(--flare-gantt-on-surface, var(--flare-color-on-surface));
    border: var(--_line-width) solid var(--_line);
    border-radius: var(--flare-gantt-radius, var(--flare-shape-medium));
    font-family: var(--flare-gantt-font, var(--flare-typescale-body-small-font));
    font-weight: var(--flare-gantt-font-weight, var(--flare-typescale-body-small-weight));
    line-height: var(--flare-gantt-line-height, var(--flare-typescale-body-small-height));
    letter-spacing: var(--flare-gantt-letter-spacing, var(--flare-typescale-body-small-spacing));
    font-size: var(--flare-gantt-font-size, var(--flare-typescale-body-small-size));
    overflow: hidden;
}

.flare-gantt__scroll {
    overflow: auto;
    max-height: var(--flare-gantt-max-height, none);
}

/* Header: the corner above the row headers and the two-line scale. */
.flare-gantt__header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    width: max-content;
    min-width: 100%;
    background: var(--flare-gantt-header-bg, var(--flare-color-surface-container-low));
    color: var(--flare-gantt-header-fg, var(--flare-color-on-surface-variant));
    border-bottom: var(--_line-width) solid var(--_line);
}

.flare-gantt__corner {
    position: sticky;
    left: 0;
    z-index: 1;
    flex: none;
    width: var(--_gantt-side);
    display: flex;
    align-items: flex-end;
    padding: var(--flare-spacing-3, 0.375rem) var(--flare-spacing-5, 0.625rem);
    background: inherit;
    border-right: var(--_line-width) solid var(--_line);
    box-sizing: border-box;
    font-weight: 600;
}

/* The row-header column's edge: a FlareSplitter laid over the chart along the column's right border, the full
   height of the chart. It stays clear until it is pointed at or focused, so the border alone shows at rest. */
.flare-gantt__side-splitter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--_gantt-side) - var(--flare-splitter-gutter-size) / 2);
    z-index: 5;
}

.flare-gantt__side-splitter:not(:hover):not(:focus-visible):not(:active) {
    background: transparent;
}

/* With a mouse the -/+ steps show on hover and focus; on a touch screen, where nothing hovers, they stay. */
@media (hover: hover) {
    .flare-gantt__side-splitter:not(:hover):not(:focus-visible) > .flare-splitter__step-decrease,
    .flare-gantt__side-splitter:not(:hover):not(:focus-visible) > .flare-splitter__step-increase {
        opacity: 0;
    }
}

.flare-gantt__scale {
    position: relative;
    flex: none;
}

.flare-gantt__scale-row {
    position: relative;
    height: var(--flare-gantt-scale-height, calc(var(--flare-spacing-16) + var(--flare-spacing-2)));
}

.flare-gantt__scale-row--major {
    height: var(--flare-gantt-scale-major-height, var(--flare-spacing-12));
    border-bottom: var(--_line-width) solid var(--_line);
    font-weight: 600;
}

.flare-gantt__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    border-left: var(--_line-width) solid var(--_line);
    box-sizing: border-box;
}

.flare-gantt__scale-row--major .flare-gantt__tick {
    align-items: flex-start;
    padding-inline: var(--flare-spacing-3, 0.375rem);
}

.flare-gantt__tick--nonworking {
    background: var(--flare-gantt-nonworking-bg, var(--flare-color-surface-container));
}

.flare-gantt__tick-caption {
    opacity: var(--flare-gantt-caption-opacity, 0.75);
}

/* Panel: as wide as the axis, so its sticky header stays in view however far the axis scrolls. */
.flare-gantt__panel {
    width: max-content;
    min-width: 100%;
}

.flare-gantt__panel + .flare-gantt__panel {
    border-top: var(--flare-gantt-panel-gap, var(--flare-spacing-2)) solid var(--flare-gantt-panel-gap-color, var(--flare-color-surface-container));
}

.flare-gantt__panel-header {
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 100%;
    padding: var(--flare-spacing-4, 0.5rem) var(--flare-spacing-5, 0.625rem);
    font-weight: 600;
}

/* The panel isolates its layers: whatever it stacks stays under the sticky scale. */
.flare-gantt__body {
    position: relative;
    isolation: isolate;
    width: max-content;
    min-width: 100%;
}

.flare-gantt__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--_gantt-side);
    z-index: 0;
    pointer-events: none;
}

.flare-gantt__overlay--front {
    z-index: 3;
}

.flare-gantt__gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: var(--_line-width) solid var(--flare-gantt-grid-line, var(--flare-gantt-line, var(--flare-color-outline-variant)));
    opacity: var(--flare-gantt-grid-opacity, 0.6);
}

.flare-gantt__nonworking {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--flare-gantt-nonworking-bg, var(--flare-color-surface-container));
}

.flare-gantt__region {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--flare-gantt-region-bg, color-mix(in srgb, var(--flare-color-primary) 8%, transparent));
    border-inline: var(--_line-width) dashed var(--flare-gantt-region-border, var(--flare-color-primary));
    box-sizing: border-box;
}

.flare-gantt__region-label {
    position: absolute;
    top: var(--flare-spacing-1, 0.125rem);
    left: var(--flare-spacing-2, 0.25rem);
    color: var(--flare-gantt-region-fg, var(--flare-color-primary));
    font-weight: 600;
    white-space: nowrap;
}

/* Rows. */
/* A row is no stacking context, so its sticky header can rise above the panel's overlays. */
.flare-gantt__row {
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.flare-gantt__row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: var(--_line-width) solid var(--flare-gantt-row-line, var(--flare-gantt-line, var(--flare-color-outline-variant)));
    pointer-events: none;
}

.flare-gantt__side {
    position: sticky;
    left: 0;
    z-index: 5; /* above bars (1), links and row markers (2) and the front overlay (3) scrolling under it */
    flex: none;
    width: var(--_gantt-side);
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-2, 0.25rem);
    padding-block: var(--flare-spacing-1, 0.125rem);
    padding-inline-end: var(--flare-spacing-4, 0.5rem);
    padding-inline-start: calc(var(--flare-gantt-indent, var(--flare-spacing-6)) * var(--_depth, 0));
    background: var(--flare-gantt-side-bg, var(--flare-color-surface));
    border-right: var(--_line-width) solid var(--_line);
    box-sizing: border-box;
    overflow: hidden;
}

.flare-gantt__row--parent > .flare-gantt__side {
    font-weight: 600;
}

.flare-gantt__side-content {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.flare-gantt__toggle,
.flare-gantt__toggle-space {
    flex: none;
    width: var(--flare-gantt-toggle-size, var(--flare-spacing-10));
    height: var(--flare-gantt-toggle-size, var(--flare-spacing-10));
}

.flare-gantt__toggle {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--flare-shape-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.flare-gantt__toggle::before {
    content: "";
    width: 0.35em;
    height: 0.35em;
    border-right: 0.12em solid currentColor;
    border-bottom: 0.12em solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--flare-motion-duration-small-move);
}

.flare-gantt__toggle--expanded::before {
    transform: rotate(45deg);
}

.flare-gantt__toggle:hover {
    background: var(--flare-gantt-hover-bg, var(--flare-color-surface-container));
}

.flare-gantt__track {
    position: relative;
    flex: none;
    overflow: hidden;
}

/* Cells: a strip of values above the lanes. */
.flare-gantt__cell {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--flare-spacing-1, 0.125rem);
    box-sizing: border-box;
    background: var(--flare-gantt-cell-bg, var(--flare-color-surface-container-low));
    color: var(--flare-gantt-cell-fg, var(--flare-color-on-surface));
    border-right: var(--_line-width) solid var(--flare-gantt-surface, var(--flare-color-surface));
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

/* Bars. */
.flare-gantt__bar-slot {
    position: absolute;
    z-index: 1;
}

.flare-gantt__bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--flare-gantt-bar-bg, var(--flare-color-primary));
    color: var(--flare-gantt-bar-fg, var(--flare-color-on-primary));
    border: var(--_line-width) solid var(--flare-gantt-bar-border, transparent);
    border-radius: var(--flare-gantt-bar-radius, var(--flare-shape-small));
    cursor: pointer;
    user-select: none;
}

.flare-gantt__bar--summary {
    --flare-gantt-bar-bg: var(--flare-gantt-summary-bg, var(--flare-color-on-surface-variant));
    --flare-gantt-bar-fg: var(--flare-gantt-summary-fg, var(--flare-color-surface));
    border-radius: var(--flare-gantt-summary-radius, var(--flare-shape-extra-small));
}

.flare-gantt__bar--selected {
    box-shadow: 0 0 0 var(--flare-gantt-selected-width, var(--flare-border-width-emphasis)) var(--flare-gantt-selected, var(--flare-color-tertiary));
}

.flare-gantt__bar--critical {
    --flare-gantt-bar-border: var(--flare-gantt-critical, var(--flare-color-error));
    border-width: var(--flare-gantt-critical-width, var(--flare-border-width-emphasis));
}

.flare-gantt__bar--suggested {
    background: transparent;
    color: var(--flare-gantt-suggested-fg, var(--flare-color-primary));
    border: var(--flare-gantt-suggested-width, var(--flare-border-width-emphasis)) dashed var(--flare-gantt-suggested, var(--flare-color-primary));
    cursor: default;
    pointer-events: none;
}

.flare-gantt__bar--preview {
    opacity: var(--flare-gantt-preview-opacity, 0.7);
    box-shadow: var(--flare-elevation-2, none);
}

/* The bar a link starts from wears the theme's focus ring, dashed; a focused bar takes the solid one from a11y.css. */
.flare-gantt__bar--link-source,
.flare-gantt__bar--link-source:focus-visible {
    outline: var(--flare-focus-ring);
    outline-style: dashed;
}

.flare-gantt__segment {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--flare-gantt-segment-bg, transparent);
    color: var(--flare-gantt-segment-fg, inherit);
    border: var(--_line-width) var(--flare-gantt-segment-border-style, var(--flare-border-style)) var(--flare-gantt-segment-border, transparent);
    border-radius: inherit;
    white-space: nowrap;
    padding-inline: var(--flare-spacing-2, 0.25rem);
}

.flare-gantt__progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--flare-gantt-progress-bg, color-mix(in srgb, var(--flare-color-on-primary) 22%, transparent));
    pointer-events: none;
}

.flare-gantt__bar-content {
    position: relative;
    min-width: 0;
    padding-inline: var(--flare-spacing-3, 0.375rem);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.flare-gantt__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--flare-gantt-handle-width, var(--flare-spacing-3));
    cursor: ew-resize;
}

.flare-gantt__handle--start { left: 0; }
.flare-gantt__handle--end { right: 0; }

/* An editable bar is moved by a pointer drag, so a touch on it must not scroll the chart instead. */
.flare-gantt__body[data-editable] .flare-gantt__bar:not(.flare-gantt__bar--summary):not(.flare-gantt__bar--suggested) {
    cursor: grab;
    touch-action: none;
}

/* The grip a link is drawn from: inside the bar, just before the end handle, shown on hover and focus. */
.flare-gantt__link-handle {
    position: absolute;
    top: 50%;
    right: var(--flare-gantt-handle-width, var(--flare-spacing-3));
    z-index: 1;
    width: var(--flare-gantt-link-handle-size, var(--flare-spacing-5));
    height: var(--flare-gantt-link-handle-size, var(--flare-spacing-5));
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--flare-gantt-bar-fg, var(--flare-color-on-primary));
    opacity: 0;
    cursor: crosshair;
}

.flare-gantt__bar:hover .flare-gantt__link-handle,
.flare-gantt__bar:focus-visible .flare-gantt__link-handle {
    opacity: 1;
}

/* The connector that follows the pointer while a link is drawn. */
.flare-gantt__link--draft {
    stroke-dasharray: 4 3;
}

/* Markers: a vertical line with an optional caption. */
.flare-gantt__marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    border-left: var(--flare-gantt-marker-width, var(--flare-border-width-emphasis)) var(--flare-gantt-marker-style, var(--flare-border-style)) var(--flare-gantt-marker, var(--flare-color-error));
    pointer-events: none;
}

.flare-gantt__marker-label {
    position: absolute;
    top: var(--flare-spacing-1, 0.125rem);
    left: var(--flare-spacing-1, 0.125rem);
    padding: 0 var(--flare-spacing-2, 0.25rem);
    border-radius: var(--flare-shape-extra-small);
    background: var(--flare-gantt-marker, var(--flare-color-error));
    color: var(--flare-gantt-marker-fg, var(--flare-color-on-error));
    font-weight: 600;
    white-space: nowrap;
}

/* Links. */
.flare-gantt__links {
    position: absolute;
    top: 0;
    left: var(--_gantt-side);
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

.flare-gantt__link {
    fill: none;
    stroke: var(--flare-gantt-link, var(--flare-color-outline));
    stroke-width: var(--flare-gantt-link-width, var(--flare-border-width));
    stroke-dasharray: var(--flare-gantt-link-dash, none);
}

.flare-gantt__link--critical {
    stroke: var(--flare-gantt-critical, var(--flare-color-error));
}

.flare-gantt__arrow {
    fill: var(--flare-gantt-link, var(--flare-color-outline));
}

/* Drop targets for an outside drag: one per row, the unit under the pointer lit by the axis script. */
.flare-gantt__drop {
    position: absolute;
    inset: 0;
}

.flare-gantt__drop-unit {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

/* While a drag is on, whatever in a track does not take the payload lets the pointer through, so a unit
   covered by a bar or a cell still takes a payload only the units accept, and a bar takes one only bars accept. */
.flare-gantt:has(.flare-drop-zone--candidate) .flare-gantt__track > :not(.flare-drop-zone--candidate) {
    pointer-events: none;
}

/* A grid of outlined units is noise; the chart tints them instead and outlines only the one under the pointer. */
.flare-gantt__drop.flare-drop-zone--candidate,
.flare-gantt__item-drop.flare-drop-zone--candidate {
    outline: none;
}

.flare-gantt__drop.flare-drop-zone--candidate {
    background: var(--flare-gantt-drop-candidate, color-mix(in srgb, var(--flare-color-primary) 6%, transparent));
}

.flare-gantt__drop.flare-drop-zone--over,
.flare-gantt__item-drop.flare-drop-zone--over {
    outline: none;
}

.flare-gantt__drop.flare-drop-zone--over {
    background: var(--flare-gantt-drop-row, color-mix(in srgb, var(--flare-color-primary) 10%, transparent));
}

.flare-gantt__drop.flare-drop-zone--over > .flare-gantt__drop-unit {
    display: block;
    background: var(--flare-gantt-drop-over, color-mix(in srgb, var(--flare-color-primary) 22%, transparent));
    box-shadow: inset 0 0 0 2px var(--flare-gantt-drop-outline, var(--flare-color-primary));
}

.flare-gantt__item-drop.flare-drop-zone--candidate .flare-gantt__bar {
    box-shadow: 0 0 0 1px var(--flare-gantt-drop-outline, var(--flare-color-primary));
}

.flare-gantt__item-drop.flare-drop-zone--over .flare-gantt__bar {
    box-shadow: 0 0 0 3px var(--flare-gantt-drop-outline, var(--flare-color-primary));
}

/* Legend: each sample is the chart's own element for its kind, sized down, so it takes the same look. */
.flare-gantt-legend {
    font-family: var(--flare-gantt-font, var(--flare-typescale-body-small-font));
    font-weight: var(--flare-gantt-font-weight, var(--flare-typescale-body-small-weight));
    line-height: var(--flare-gantt-line-height, var(--flare-typescale-body-small-height));
    letter-spacing: var(--flare-gantt-letter-spacing, var(--flare-typescale-body-small-spacing));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flare-gantt-legend-gap, var(--flare-spacing-5));
    font-size: var(--flare-gantt-legend-font-size, var(--flare-typescale-body-small-size));
    color: var(--flare-gantt-legend-fg, var(--flare-color-on-surface-variant));
}

.flare-gantt-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-2);
}

.flare-gantt-legend .flare-gantt-legend__sample {
    position: relative;
    inset: auto;
    display: inline-block;
    flex: none;
    width: var(--flare-gantt-legend-sample-width, var(--flare-spacing-10));
    height: var(--flare-gantt-legend-sample-height, var(--flare-spacing-5));
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    cursor: default;
    pointer-events: none;
}

/* A cell sample can be the colour of the page (free time); a hairline keeps it visible. */
.flare-gantt-legend .flare-gantt-legend__sample.flare-gantt__cell {
    border: var(--flare-border-width) solid var(--flare-gantt-legend-sample-border, var(--flare-color-outline-variant));
}

/* A region is drawn edge to edge on the chart; in the key its own dashed border goes all the way round. */
.flare-gantt-legend .flare-gantt-legend__sample.flare-gantt__region {
    border: var(--flare-border-width) dashed var(--flare-gantt-region-border, var(--flare-color-primary));
}

.flare-gantt-legend .flare-gantt-legend__sample > .flare-gantt__segment {
    inset: 0;
    padding: 0;
}

.flare-gantt__announce {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .flare-gantt__toggle::before { transition: none; }
}