/* Gantt. Loaded after collection-pages.css; the chart's SVG paints only with
   tokens, so it follows paper and night themes (exports resolve to paper).
   Bars say where a task stands: solid rust is under way, a sage wash is up
   next, and a quiet paper grey is done. */

:root {
    --gantt-next: #e2e4d8;
    --gantt-next-line: #9aa48d;
    --gantt-next-text: #4f5d42;
    --gantt-done: #e3e0d5;
    --gantt-done-text: #8a887e;
    --gantt-weekend: #eeebe2;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gantt-next: #2b3027;
        --gantt-next-line: #5f7052;
        --gantt-next-text: #b4c2a6;
        --gantt-done: #2a2b26;
        --gantt-done-text: #8f8d82;
        --gantt-weekend: #20211e;
    }
}
:root[data-theme="dark"] {
    --gantt-next: #2b3027;
    --gantt-next-line: #5f7052;
    --gantt-next-text: #b4c2a6;
    --gantt-done: #2a2b26;
    --gantt-done-text: #8f8d82;
    --gantt-weekend: #20211e;
}

.collection-subpage .gantt-intro { max-width: none; margin: -12px 0 36px; color: var(--muted-foreground); font-size: 15px; line-height: 1.7; }
.gantt-intro strong { color: var(--foreground); font-weight: 500; }

/* ----------------------------------------------------------- sheet head
   The project name is the chart's title, edited in place. */

.sheet-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; padding-bottom: 18px; }
.sheet-titles { flex: 1 1 360px; min-width: 0; }
.sheet-eyebrow { display: block; margin-bottom: 4px; color: var(--subtle-foreground); font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sheet-title { margin: 0; font: inherit; }
.gantt-page .sheet-title input#projectName {
    display: block; width: 100%; min-height: 0; margin: 0 0 0 -2px; padding: 2px 2px 4px;
    border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: transparent; box-shadow: none;
    color: var(--foreground); font: 400 34px/1.2 var(--font-serif); letter-spacing: -.03em; text-overflow: ellipsis;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.gantt-page .sheet-title input#projectName:hover { border-bottom-color: var(--border-strong); }
.gantt-page .sheet-title input#projectName:focus { border-bottom-color: var(--brand); outline: none; box-shadow: none; }
.gantt-page .sheet-title input#projectName::placeholder { color: var(--subtle-foreground); }
.sheet-dateline { margin-top: 6px; color: var(--muted-foreground); font: 12px/1.6 var(--font-mono); letter-spacing: .02em; }
.sheet-dateline span { color: var(--subtle-foreground); }

.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gantt-page .sheet-actions button:not(.theme-toggle) { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.gantt-page .sheet-actions #addTask span { margin-right: 2px; font-family: var(--font-mono); }
.sheet-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--border); }

.collection-subpage .gantt-sheet .app-status:empty { min-height: 0; }
.collection-subpage .gantt-sheet .app-status:not(:empty) { margin-bottom: 8px; }

/* ---------------------------------------------------------------- chart */

.gantt-frame { position: relative; border-top: 1px solid var(--foreground); border-bottom: 1px solid var(--border); }
.gantt-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.gantt-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
#ganttChart { display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
#ganttChart text { font-family: var(--font-sans); }

#ganttChart .g-bg { fill: var(--background); }
#ganttChart .g-weekend { fill: var(--gantt-weekend); }
#ganttChart .g-rule { stroke: var(--border-strong); stroke-width: 1; }
#ganttChart .g-row-rule { stroke: var(--border); stroke-width: 1; }
#ganttChart .g-month-rule { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 1 3; }
#ganttChart .g-tick { stroke: var(--border-strong); stroke-width: 1; }
#ganttChart .g-month { fill: var(--foreground); font-family: var(--font-serif); font-size: 15px; letter-spacing: -.01em; }
#ganttChart .g-day { fill: var(--muted-foreground); font-family: var(--font-mono); font-size: 10.5px; }
#ganttChart .g-day.is-weekend { fill: var(--subtle-foreground); opacity: .7; }
#ganttChart .g-day.is-today { fill: var(--on-brand); font-weight: 600; opacity: 1; }
#ganttChart .g-today-dot { fill: var(--brand); }
#ganttChart .g-col { fill: var(--subtle-foreground); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
#ganttChart .g-today { stroke: var(--brand); stroke-width: 1.25; opacity: .85; }
#ganttChart .g-today-tag { fill: var(--brand); }
#ganttChart .g-today-label { fill: var(--on-brand); font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; }
#ganttChart .g-empty { fill: var(--foreground); font-family: var(--font-serif); font-size: 22px; }
#ganttChart .g-empty-hint { fill: var(--muted-foreground); font-size: 14px; }

#ganttChart .g-hover { fill: transparent; transition: fill var(--motion-fast) var(--ease-standard); }
#ganttChart .g-row:is(.is-active, .is-selected) .g-hover { fill: var(--brand-soft); }
#ganttChart .g-index { fill: var(--subtle-foreground); font-family: var(--font-mono); font-size: 11px; }
#ganttChart .g-name { fill: var(--foreground); font-size: 14px; }
#ganttChart .g-row.is-selected .g-name { font-weight: 550; }

/* Bars and milestones */
#ganttChart .g-bar { outline: none; cursor: grab; }
#ganttChart .g-shape { stroke-width: 1; transition: fill var(--motion-fast) var(--ease-standard), stroke var(--motion-fast) var(--ease-standard); }
#ganttChart .is-now .g-shape { fill: var(--viz-a); stroke: var(--viz-a); }
#ganttChart .is-next .g-shape { fill: var(--gantt-next); stroke: var(--gantt-next-line); }
#ganttChart .is-done .g-shape { fill: var(--gantt-done); stroke: var(--gantt-done); }
#ganttChart .is-mile.is-next .g-shape { fill: var(--viz-b-strong); stroke: var(--viz-b-strong); }
#ganttChart .is-mile.is-done .g-shape { fill: var(--border-strong); stroke: var(--border-strong); }
#ganttChart .g-row:is(.is-active, .is-selected) .is-now .g-shape { fill: var(--viz-a-strong); stroke: var(--viz-a-strong); }
#ganttChart .g-row:is(.is-active, .is-selected) .is-next:not(.is-mile) .g-shape { stroke: var(--viz-b-strong); }
#ganttChart .g-row:is(.is-active, .is-selected) .is-done:not(.is-mile) .g-shape { stroke: var(--border-strong); }

#ganttChart .g-in { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .01em; pointer-events: none; }
#ganttChart .is-now .g-in { fill: var(--on-brand); }
#ganttChart .is-next .g-in { fill: var(--gantt-next-text); }
#ganttChart .is-done .g-in { fill: var(--gantt-done-text); }
#ganttChart .g-out { fill: var(--muted-foreground); font-family: var(--font-mono); font-size: 11px; pointer-events: none; }
#ganttChart .is-done .g-name { fill: var(--muted-foreground); }

#ganttChart .g-grab { fill: transparent; }
#ganttChart .g-edge { cursor: ew-resize; }
#ganttChart .g-grip { stroke-width: 1.5; stroke-linecap: round; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-standard); }
#ganttChart .is-now .g-grip { stroke: var(--on-brand); }
#ganttChart .is-next .g-grip { stroke: var(--gantt-next-line); }
#ganttChart .is-done .g-grip { stroke: var(--border-strong); }
#ganttChart .g-bar:is(:hover, :focus-visible) .g-grip,
#ganttChart .g-row.is-selected .g-grip { opacity: .8; }
#ganttChart .g-focus { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0; }
#ganttChart .g-bar:focus-visible .g-focus { opacity: 1; }
#ganttChart.is-dragging, #ganttChart.is-dragging * { cursor: grabbing; }
#ganttChart.is-dragging[data-edge=start], #ganttChart.is-dragging[data-edge=start] *,
#ganttChart.is-dragging[data-edge=end], #ganttChart.is-dragging[data-edge=end] * { cursor: ew-resize; }
@media (pointer: coarse) { #ganttChart .g-bar { touch-action: none; } }

/* Live dates while dragging or nudging: a small ink label over the bar. */
.gantt-tip {
    position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
    padding: 5px 9px; border-radius: var(--radius);
    background: var(--foreground); color: var(--background);
    font: 12px/1.3 var(--font-mono); letter-spacing: .01em;
    box-shadow: 0 8px 20px -10px hsl(var(--shadow-color) / .5);
}
.gantt-tip::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.gantt-tip[hidden] { display: none; }

/* Arrival: bars draw in from their start date. */
@media (prefers-reduced-motion: no-preference) {
    #ganttChart.is-arriving .g-shape { transform-box: fill-box; transform-origin: 0 50%; animation: gantt-grow var(--motion-settle) var(--ease-standard) both; }
    #ganttChart.is-arriving .g-row:nth-of-type(2) .g-shape { animation-delay: 40ms; }
    #ganttChart.is-arriving .g-row:nth-of-type(3) .g-shape { animation-delay: 80ms; }
    #ganttChart.is-arriving .g-row:nth-of-type(4) .g-shape { animation-delay: 120ms; }
    #ganttChart.is-arriving .g-row:nth-of-type(n+5) .g-shape { animation-delay: 160ms; }
    @keyframes gantt-grow { from { transform: scaleX(0); opacity: 0; } }
}

/* Legend and how-to under the chart. */
.gantt-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; margin-top: 14px; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.gantt-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gantt-legend span::before { content: ''; width: 16px; height: 10px; border-radius: 2px; }
.gantt-legend .lg-done::before { background: var(--gantt-done); }
.gantt-legend .lg-now::before { background: var(--viz-a); }
.gantt-legend .lg-next::before { background: var(--gantt-next); box-shadow: inset 0 0 0 1px var(--gantt-next-line); }
.gantt-legend .lg-mile::before { width: 9px; height: 9px; margin-inline: 3px 4px; border-radius: 1px; background: var(--viz-b-strong); transform: rotate(45deg); }
.gantt-legend .lg-weekend::before { background: var(--gantt-weekend); box-shadow: inset 0 0 0 1px var(--border); }
.collection-subpage .gantt-hint { flex: 1 1 340px; max-width: 560px; font-size: 13px; text-align: right; }
.gantt-hint kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px; background: var(--raised); color: var(--foreground); font: 11px/17px var(--font-mono); text-align: center; }

/* --------------------------------------------------------------- editor
   One header row, then each task as a quiet line of fields. */

.collection-subpage .task-editor { margin-top: 64px; }
.task-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 18px; }
.collection-subpage .task-editor h2 { font: 400 28px/1.25 var(--font-serif); letter-spacing: -.025em; }
.collection-subpage .task-editor-head p { margin: 0; color: var(--muted-foreground); font-size: 14px; }

.task-head,
.task-line {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 136px 136px 44px 102px;
    gap: 10px;
    align-items: center;
}
.task-head { padding: 0 0 9px; border-bottom: 1px solid var(--foreground); color: var(--subtle-foreground); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.task-head > span:first-child { padding-left: 4px; }
.task-head > span:nth-child(2) { padding-left: 11px; }
.task-head > span:nth-child(3), .task-head > span:nth-child(4) { padding-left: 9px; }
.task-head .head-days { text-align: right; }
.task-line { position: relative; padding: 7px 0; border-bottom: 1px solid var(--border); transition: background-color var(--motion-fast) var(--ease-standard); }
.task-line:is(.is-active, :focus-within) { background: linear-gradient(90deg, var(--brand-soft), transparent 75%); }
.task-line.is-selected { background: linear-gradient(90deg, var(--brand-soft), var(--brand-soft) 30%, transparent); }
.task-line.is-selected::before { content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--brand); }

/* The index carries its bar's state as a small swatch. */
.task-index { display: flex; align-items: center; gap: 8px; padding-left: 4px; color: var(--subtle-foreground); font-family: var(--font-mono); font-size: 12px; }
.task-index::before { content: ''; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 2px; background: var(--border); }
.task-line[data-state=is-now] .task-index::before { background: var(--viz-a); }
.task-line[data-state=is-next] .task-index::before { background: var(--gantt-next-line); }
.task-line[data-state=is-done] .task-index::before { background: var(--gantt-done); box-shadow: inset 0 0 0 1px var(--border-strong); }

.task-field { display: block; min-width: 0; }
.field-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Fields stay chromeless until touched, so the list reads like a table. */
.gantt-page .task-line .task-field input:not([type=checkbox]) { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; box-shadow: none; }
.gantt-page .task-line .task-field input:not([type=checkbox]):hover { border-color: var(--border); background: var(--background); }
.gantt-page .task-line .task-field input:not([type=checkbox]):focus { border-color: var(--border-strong); background: var(--raised); }
.gantt-page .task-line .field-name input:not([type=checkbox]) { font-size: 15px; }
.gantt-page .task-line .task-field input[type=date] { padding: 0 6px 0 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: -.01em; }
.task-field input[type=date]::-webkit-calendar-picker-indicator { margin-left: 2px; opacity: .35; cursor: pointer; transition: opacity var(--motion-fast) var(--ease-standard); }
.task-field input[type=date]:is(:hover, :focus)::-webkit-calendar-picker-indicator { opacity: .8; }
.task-duration { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 12px; text-align: right; }

.task-tools { display: flex; justify-content: flex-end; gap: 2px; }
.gantt-page .task-line .task-tools button:is(.task-up, .task-down, .remove-task) { display: inline-grid; place-items: center; width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--subtle-foreground); }
.gantt-page .task-line .task-tools button:is(.task-up, .task-down):hover:not(:disabled) { background: var(--secondary); color: var(--foreground); }
.gantt-page .task-line .task-tools button.remove-task:hover { background: var(--destructive-soft); color: var(--destructive); }
.gantt-page .task-line .task-tools button:disabled { opacity: .25; cursor: default; }
@media (hover: hover) {
    .task-tools { opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
    .task-line:is(:hover, :focus-within, .is-selected) .task-tools { opacity: 1; }
}

.task-line[aria-invalid=true] { background: var(--destructive-soft); }
.task-line[aria-invalid=true] .task-index { color: var(--destructive); }
.gantt-page .task-line .task-field input[aria-invalid=true] { border-color: var(--destructive); }
.task-line[aria-invalid=true] .task-duration { color: var(--destructive); }

.task-empty { padding: 28px 4px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font: 400 19px/1.4 var(--font-serif); }
.task-empty[hidden] { display: none; }

.gantt-page .add-task-inline:not(.theme-toggle) { display: flex; align-items: center; width: 100%; justify-content: flex-start; gap: 12px; min-height: 50px; margin-top: 0; padding: 0 0 0 4px; border: 0; border-bottom: 1px dashed var(--border-strong); border-radius: 0; background: none; color: var(--muted-foreground); font-size: 14px; }
.add-task-inline span { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%; font-family: var(--font-mono); font-size: 13px; line-height: 1; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.gantt-page .add-task-inline:not(.theme-toggle):hover { background: none; color: var(--brand); }
.add-task-inline:hover span { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }

@media (max-width: 900px) {
    .task-head, .task-line { grid-template-columns: 32px minmax(0, 1fr) 132px 132px 34px 100px; gap: 6px; }
    .collection-subpage .gantt-hint { text-align: left; }
}

@media (max-width: 700px) {
    .collection-subpage .gantt-intro { margin-bottom: 28px; }
    .gantt-page .sheet-title input#projectName { font-size: 28px !important; }
    .sheet-actions { width: 100%; }
    .gantt-page .sheet-actions button:not(.theme-toggle) { flex: 1 1 auto; padding-inline: 10px; }
    .sheet-sep { display: none; }
    .collection-subpage .task-editor h2 { font-size: 26px; }
    .task-head { display: none; }
    .task-table { border-top: 1px solid var(--foreground); }
    .task-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 12px 0 14px; }
    .task-line.is-selected::before { left: -10px; }
    .task-index { display: none; }
    .field-name { grid-column: 1 / 3; grid-row: 1; margin-right: 104px; }
    .task-tools { position: absolute; top: 15px; right: 0; }
    .field-start { grid-column: 1; grid-row: 2; }
    .field-end { grid-column: 2; grid-row: 2; }
    .task-duration { display: none; }
    .field-start .field-caption, .field-end .field-caption { position: static; display: block; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip-path: none; color: var(--muted-foreground); font-size: 12px; }
    .gantt-page .task-line .task-field input:not([type=checkbox]) { border-color: var(--border); padding-inline: 8px; }
    .gantt-page .task-line .field-name input:not([type=checkbox]) { border-color: transparent; padding-left: 0; font-family: var(--font-serif); font-size: 20px !important; }
    .gantt-page .task-line .task-field input[type=date] { font-family: var(--font-sans); font-size: 15px; }
    .collection-subpage .gantt-hint { flex-basis: 100%; }
}