/* Written by Richard Christopher, Copyright 2026 Mindfull */
.unified-planning { color: var(--text); display: grid; gap: var(--space-3); min-width: 0; padding: 0; }
.unified-planning > :not(.unified-plan-header) { margin-inline: var(--space-3); }

/* The bar of the five views: the one hairline under it parts it from the page, which is one surface with it. */
.unified-plan-header { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); min-width: 0; padding: var(--space-1) var(--space-3); min-height: 44px; border-bottom: 1px solid var(--border); }
.unified-plan-views { min-width: 0; overflow-x: auto; }

.unified-plan-filters,
.unified-plan-pages { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Hierarchy and scoping live in the workspace's left Resources drawer. */
.unified-plan-layout { display: grid; align-items: start; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.unified-plan-body { min-width: 0; }
@media (max-width: 760px) {
  /* The filter chips are one line that scrolls sideways, so a plan with many tags does not push the view down either. */
  .unified-plan-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: var(--space-1); }
  .unified-plan-filters > div { flex: none; }
  .unified-plan-filters .cloudcanvas-ui-chips { flex-wrap: nowrap; }
}

/* Momentum's own buttons here, the retry and the page turns, are the kit's buttons at a full target: their look is the kit's. */
.unified-planning > .cloudcanvas-ui-button,
.unified-plan-pages .cloudcanvas-ui-button { min-height: 44px; padding-inline: var(--space-3); border-radius: 6px; }

/*
 * THE ITEM EDITOR (`shell/item/editor.js`), in the item view. No box of its own: its fields stand on
 * the pane's one surface, each a caption over a field of the kit's look at a full target, and a
 * hairline parts the links and the log from them.
 */
.unified-plan-editor { display: grid; gap: var(--space-3); min-width: 0; }
.unified-plan-field { display: grid; gap: var(--space-1); max-width: 32rem; color: var(--text-dim); font-size: var(--text-base); }
.unified-plan-field :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-height: 44px; color: var(--text); font-size: var(--text-lg); border-radius: 6px; }
.unified-plan-field textarea { min-height: 8rem; resize: vertical; }
.unified-item-links, .unified-item-log { display: grid; gap: var(--space-2); justify-items: start; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.unified-item-links h3, .unified-item-log h3 { margin: 0; color: var(--text-dim); font-size: var(--text-base); font-weight: var(--weight-medium); }
.unified-item-links select { min-height: 44px; max-width: 32rem; width: 100%; border-radius: 6px; }
/* A note's "New action" (phase 29, P4): its title field at the link picker's width, Add action under it, a refusal under that. */
.unified-item-new-action { display: grid; gap: var(--space-2); justify-items: start; width: 100%; max-width: 32rem; }
.unified-item-new-action[hidden] { display: none; }
.unified-item-new-action .unified-plan-field { width: 100%; }
.unified-plan-link-list { display: grid; width: 100%; list-style: none; margin: 0; padding: 0; }
.unified-plan-link-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }

.unified-plan-warning,
.unified-plan-error,
.unified-plan-field-error {
  color: var(--fail);
}

/* Planning updates in place and hides parts with the `hidden` attribute; restated
   here because the grid and flex rules above outrank the UA's. */
.unified-plan-layout[hidden],
.unified-plan-filters[hidden],
.unified-plan-pages[hidden] {
  display: none;
}

/* An action's All day switch stands in the column of fields like any other; a field's refusal stands under what it refuses. */
.unified-plan-switch { justify-items: start; }
.unified-plan-field .unified-plan-field-error { font-size: var(--text-base); }
.unified-plan-field .unified-plan-field-error[hidden] { display: none; }

/* A day with nothing planned: its words stand where the view would, beside the rail, with no box of their own. */
.unified-plan-none { display: grid; place-items: center; min-width: 0; min-height: 12rem; padding: var(--space-6) var(--space-5); }
.unified-plan-none[hidden], .unified-plan-body[hidden] { display: none; }
.unified-plan-none .cloudcanvas-ui-empty { max-width: 36ch; }
.unified-plan-none .cloudcanvas-ui-empty-action { min-height: 44px; padding-inline: var(--space-4); border-radius: 6px; }

/*
 * THE FOCUS CONTROLS OF AN ACTION, at the head of its item panel (`shell/item/focus.js`). No box of
 * their own: one line holds the clock, the stage it is in and its actions, what the session says of
 * this action stands under it, and a hairline and space part them from the editor below. The clock is
 * a timer, one of the two things set in the mono face.
 */
.unified-item-focus { display: grid; gap: var(--space-2); min-width: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
/*
 * Hidden means not there: a class and an attribute outweigh the one class a part here is laid out by.
 * Finish is the shared icon button, laid out by a later sheet at this rule's weight; that sheet hides it (`ui/parts.css`).
 */
.unified-item-focus[hidden], .unified-item-focus [hidden] { display: none; }
.unified-item-focus p { margin: 0; overflow-wrap: anywhere; }
.unified-item-focus-caption, .unified-item-focus-other, .unified-item-focus-notice { color: var(--text-dim); font-size: var(--text-base); }
.unified-item-focus-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.unified-item-focus-clock { font-family: var(--font-mono); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.unified-item-focus-stage { display: flex; flex: 1 1 10rem; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-item-focus-meter { flex: 0 1 8rem; min-width: 0; max-width: 100%; accent-color: var(--accent); }
.unified-item-focus-actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.unified-item-focus .unified-item-focus-primary { min-height: 44px; padding-inline: var(--space-4); border-radius: 6px; white-space: nowrap; }
.unified-item-focus-error { color: var(--fail); font-size: var(--text-base); }
/* A control that is off for the moment its command runs keeps its focus and looks off (`ui/controls.js`). */
.unified-item-focus [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* "Remind me" on an action with a planned time: one quiet field under its focus controls, saved as it is chosen (`shell/item/remind.js`). */
.unified-item-remind { display: grid; gap: var(--space-1); min-width: 0; }
.unified-item-remind[hidden] { display: none; }
.unified-item-remind .unified-plan-field-error:empty { display: none; }

/* The item editor's words, read as they are written or as they read: the choice above the field, the preview in its place. */
.unified-plan-field[hidden] { display: none; }
.unified-item-text-modes { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.unified-item-text-modes .cloudcanvas-ui-chips-toggle { min-height: 44px; }
.unified-item-text-preview { min-width: 0; padding-block: var(--space-2); overflow-wrap: anywhere; }
.unified-item-text-preview[hidden] { display: none; }
.unified-item-text-preview pre { max-width: 100%; overflow-x: auto; }


/*
 * A GRAPH VIEW'S OWN BAR (the Map's, the Timeline's): its Add button, and the inline title field while it asks
 * (`features/planning/title-field.js`), over the kit's view, which keeps its toolbar, its hint and its surface.
 */
.unified-plan-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); min-width: 0; }
.unified-plan-bar .cloudcanvas-ui-button { min-height: 44px; padding-inline: var(--space-3); border-radius: 6px; }
.unified-plan-add { display: flex; flex: 1 1 18rem; flex-wrap: wrap; align-items: end; gap: var(--space-2); min-width: 0; }
.unified-plan-add .unified-plan-field { flex: 1 1 14rem; }
.unified-plan-add-actions { display: flex; gap: var(--space-2); }
.unified-plan-add .unified-plan-field-error { flex-basis: 100%; margin: 0; }
.unified-plan-bar [hidden] { display: none; }

/*
 * THE MIND MAP (`features/planning/map.js`): the surface is as tall as the page allows. A node the page's
 * filters leave out is drawn dim (`data-tone="outside"`), and its name says so.
 */
.unified-plan-map { display: grid; gap: var(--space-2); min-width: 0; }
.unified-plan-map-graph[hidden] { display: none; }
.unified-plan-map-graph { min-width: 0; --cc-ui-graph-height: clamp(18rem, calc(100vh - 24rem), 48rem); }
.unified-plan-map .cloudcanvas-ui-graph-node[data-tone="outside"] { opacity: 0.4; }

/* THE CALENDAR (`features/planning/calendar.js`): its bar (Add action, and the title field a picked range asks in) over the kit's calendar. */
.unified-plan-calendar { display: grid; gap: var(--space-2); min-width: 0; }
/*
 * A DAY KEEPS A WIDTH AN EVENT CAN BE READ IN (phase 28d, F6). The kit's week is seven columns of `minmax(0, 1fr)`: with the item
 * view open beside it, each day was 49px and an event cut to "Run chec…", and a chip that narrow gets no "more" button (the kit
 * gives the button a third of a chip at most; 5rem is its room at a fine pointer; the menu stays the right-click, Shift+F10 and a
 * held touch, which the hint says). The head, the all-day strip and the hours are as wide as their days need, and the week scrolls
 * across inside its own sheet, never the page. The gutter is the kit's (3.5rem, 2.5rem under 40rem).
 */
.unified-plan-calendar-sheet { min-width: 0; --plan-day-min: 5rem; --plan-gutter: 3.5rem; }
@media (max-width: 40rem) { .unified-plan-calendar-sheet { --plan-gutter: 2.5rem; } }
/* The kit's calendar is a grid of one `auto` column, which would grow to the week's width and widen the page: the column is the sheet's. */
.unified-plan-calendar-sheet .cloudcanvas-ui-calendar { grid-template-columns: minmax(0, 1fr); }
.unified-plan-calendar-sheet .cloudcanvas-ui-calendar-time { overflow-x: auto; }
.unified-plan-calendar-sheet .cloudcanvas-ui-calendar-time-head,
.unified-plan-calendar-sheet .cloudcanvas-ui-calendar-allday,
.unified-plan-calendar-sheet .cloudcanvas-ui-calendar-scroller { min-width: calc(var(--plan-gutter) + var(--calendar-days) * var(--plan-day-min)); }

/*
 * THE TIMELINE (`features/planning/timeline.js`): its bar over the kit's timeline, which keeps its toolbar, its
 * hint and its sheet. The date axis and tools remain usable before anything is scheduled.
 */
.unified-plan-timeline { display: grid; gap: var(--space-2); min-width: 0; }
.unified-plan-timeline-sheet { min-width: 0; }
/* What lies outside the days on screen, and the way to the nearest (`timeline-outside.js`): one quiet line in the bar. */
.unified-plan-timeline-outside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-plan-timeline-sheet[hidden] { display: none; }
/*
 * The menu of a selected bar the kit drew no button for (`timeline-more.js`): one button in the bar, after Add action, so on a phone
 * it stands on Add action's line and the sheet does not move when a bar is pressed. Its words are cut to the room Add action leaves.
 */
.unified-plan-timeline-more { min-width: 0; max-width: calc(100% - 7rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * The kit's hint under the Timeline's and the Calendar's toolbar changes with the selection. Where it wraps (a narrow
 * page), the press that selects a bar would lengthen it and push the sheet down under the pointer, so the right-click
 * or the tap that follows lands beside the bar: the hint keeps the room its longest sentence takes at that width. The
 * Timeline's longest, a bar's (it ends in "N draws a span"), takes three lines up to 424px, read in a browser at each width.
 */
.unified-planning :is(.cloudcanvas-ui-timeline-hint, .cloudcanvas-ui-calendar-hint) { min-height: 1lh; }
@media (max-width: 64rem) { .unified-planning :is(.cloudcanvas-ui-timeline-hint, .cloudcanvas-ui-calendar-hint) { min-height: 2lh; } }
/*
 * ON A PHONE THE HINT STANDS UNDER THE SHEET (phase 28d, F9). The toolbar, its scales, the hint and the scope button took the first
 * screen, and the sheet began 430 to 600px down the page. The kit's views are grids, so the hint is ordered after the sheet: what a
 * selection lengthens is below what the reader is pressing, so it keeps no room above it, and the sheet starts a hint's height higher.
 */
@media (max-width: 30rem) {
  .unified-planning .cloudcanvas-ui-timeline-hint,
  .unified-planning .cloudcanvas-ui-calendar-hint,
  .unified-planning .cloudcanvas-ui-graph-hint { order: 1; min-height: 0; }
}

/*
 * "Link to…" and "Move to…" (`ui/item-picker.js`): for a link, the kind of link, each choice a full target; then the field with
 * its matches listed under it in the dialog's flow, not floated over the choice above it.
 */
.unified-pick { display: grid; gap: var(--space-3); min-width: min(100%, 22rem); }
.unified-pick-search { display: grid; gap: var(--space-1); min-width: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-pick-search .cloudcanvas-ui-combobox { position: static; max-width: none; max-height: 14rem; box-shadow: none; }
.unified-pick-search .cloudcanvas-ui-results-option { min-height: 44px; display: flex; align-items: center; color: var(--text); }
.unified-pick-kinds { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: 0; border: 0; }
.unified-pick-kinds[hidden] { display: none; }
.unified-pick-kinds legend { margin-bottom: var(--space-1); padding: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-pick-kind { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.unified-pick .unified-plan-field-error { margin: 0; }
.unified-pick .unified-plan-field-error[hidden] { display: none; }

/*
 * Five compact icon tabs retain the kit's keyboard and selected-tab semantics. A tab's label is its name: the view on show draws
 * it beside its icon (G19), the others at no size, so no gap stands between it and the kit's icon slot, and each keeps its tooltip.
 * The label is one line in the height the icon already takes, so switching views moves nothing below the bar.
 */
.unified-plan-views .cloudcanvas-ui-tabs { gap: 2px; flex-wrap: nowrap; }
.unified-plan-views .cloudcanvas-ui-tabs-tab { font-size: 0; gap: 0; padding: 6px; min-width: 34px; min-height: 34px; }
.unified-plan-views .cloudcanvas-ui-tabs-tab[aria-selected="true"] { font-size: var(--text-base); line-height: 1; gap: var(--space-1); padding-inline: 6px var(--space-2); white-space: nowrap; }
.unified-plan-views .cloudcanvas-ui-tabs-item { flex-shrink: 0; }
/*
 * THE STORYBOARD. A section is its heading over its cards, with one hairline between them and no box of
 * its own: a card is the only box on the page. Each region has one action in words (the view's "Add
 * action", a card's "Open"); every other is an icon at a full target.
 */
.unified-plan-storyboard, .unified-story-sections { display: grid; gap: var(--space-5); min-width: 0; }
.unified-story-section { min-width: 0; }
.unified-story-bar, .unified-story-heading, .unified-story-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.unified-story-bar [hidden] { display: none; }
.unified-story-bar .unified-button, .unified-story-controls .unified-button { min-height: 44px; padding-inline: var(--space-4); border-radius: 6px; }
.unified-story-scope { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.unified-story-none { margin: 0; color: var(--text-dim); }
.unified-story-none[hidden] { display: none; }
.unified-story-heading { min-height: 44px; border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); }
.unified-story-heading h3 { flex: 1; margin: 0; overflow-wrap: anywhere; }
/* A heading that stands for its parent is that parent's item: the heading's own words, pressed as a card is. */
.unified-story-parent { min-height: 44px; margin: 0; padding: 0; color: inherit; font: inherit; text-align: start; overflow-wrap: anywhere; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.unified-story-parent:hover { color: var(--accent); }
.unified-story-parent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-story-parent[aria-current='true'] { color: var(--accent); }
.unified-story-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.unified-story-card { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: var(--space-3); background: var(--bg-raised); min-width: 0; }
.unified-story-card[data-status="done"] { border-left-color: var(--ok); }
.unified-story-card[data-selected="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-story-card summary { min-height: 44px; cursor: pointer; border-radius: 6px; }
.unified-story-plan { margin: var(--space-2) 0 0; }
.unified-story-plan [hidden] { display: none; }
.unified-story-card summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.unified-story-card h4 { margin: 8px 0; overflow-wrap: anywhere; }
.unified-story-meta { color: var(--text-dim); font-size: var(--text-sm); overflow-wrap: anywhere; }
.unified-story-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.unified-story-card .unified-story-controls { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.unified-plan-header h2, .unified-plan-header p { margin: 0; }
/*
 * Under a finger every target is 44px: the five view tabs, and the Board's category and tag chips, which are as wide as their word
 * ("ui" is 27px) and as tall as the kit makes a chip under a coarse pointer. At a fine pointer both are as they were.
 */
@media (pointer: coarse) {
  .unified-plan-views .cloudcanvas-ui-tabs-tab { min-width: 44px; min-height: 44px; }
  .unified-plan-filters .cloudcanvas-ui-chips-toggle { min-width: 44px; justify-content: center; }
}

/* Empty records keep the same working visual surface; these are creation targets, not sample items. */
.unified-plan-board .unified-plan-bar { align-items: center; margin-bottom: var(--space-2); }
.unified-plan-board .unified-plan-grouping { margin-inline-start: auto; }
.unified-plan-cards .cloudcanvas-ui-kanban-column { min-height: clamp(18rem, calc(100vh - 17rem), 42rem); }
.unified-plan-map-graph { position: relative; }
.unified-plan-map-graph[data-empty="true"] .cloudcanvas-ui-graph-viewport {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-dim) 24%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.unified-map-start { position: absolute; inset: 55% auto auto 50%; transform: translate(-50%, -50%); white-space: nowrap; border-style: dashed; }
.unified-map-start[hidden] { display: none; }
.unified-plan-timeline-sheet[data-empty="true"] .cloudcanvas-ui-timeline-grid {
  min-height: clamp(18rem, calc(100vh - 19rem), 36rem);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--border) 44px, transparent 45px);
}
.unified-planning :is(.unified-plan-map, .unified-plan-timeline) > .feed-state[data-kind="empty"] { padding: var(--space-2); min-height: 0; }
.unified-planning :is(.unified-plan-map, .unified-plan-timeline) > .feed-state[data-kind="empty"] .cloudcanvas-ui-empty { padding: 0; gap: var(--space-1); text-align: start; align-items: start; }
.unified-planning :is(.unified-plan-map, .unified-plan-timeline) > .feed-state[data-kind="empty"] .cloudcanvas-ui-empty-icon { display: none; }
.unified-plan-none { grid-column: 2; min-height: 0; padding: var(--space-2); }
.unified-story-start { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: var(--space-3); min-height: 19rem; width: min(100%, 23rem); padding: var(--space-4); color: var(--text-dim); background: var(--bg-raised); border: 1px dashed var(--border); border-radius: 10px; font: inherit; cursor: pointer; }
.unified-story-start-frame { position: relative; width: 70%; aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: 5px; background: linear-gradient(0deg, color-mix(in srgb, var(--border) 32%, transparent), transparent); }
.unified-story-start-frame::before { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 2rem; font-weight: 300; }
.unified-story-start:hover, .unified-story-start:focus-visible { color: var(--accent); border-color: var(--accent); }
.unified-story-start:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.unified-story-start[hidden] { display: none; }
@media (max-width: 760px) { .unified-plan-none { grid-column: 1; } }
@media (pointer: coarse) { .unified-map-start { min-height: 44px; } }