/* Written by Richard Christopher, Copyright 2026 Mindfull */
/* Activity owns the main view; the shell-owned mailbox floats independently. */
.feed-page {
  --feed-gutter: var(--space-6);
  --feed-clear: calc(var(--floating-clearance, 76px) + env(safe-area-inset-bottom));
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  height: 100%; min-height: 0; overflow: hidden;
  color: var(--text); background: var(--bg-raised);
  font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-normal);
}
.feed-main { display: grid; min-width: 0; min-height: 0; }
.feed-menu {
  --feed-target: 30px; --cc-control-min: 30px;
  --feed-selection-pattern: var(--feed-selection-stops, transparent 0%, var(--accent) 65%, transparent 100%);
  /* The upper pane fits what it holds (its bar and a row, or its one state with its Try again) up to two fifths, then scrolls. */
  display: grid; grid-template-rows: var(--feed-stream-size, fit-content(40%)) minmax(0, 1fr);
  height: 100%; min-width: 0; min-height: 0; background: var(--bg-raised);
}
.feed-menu[data-stream-collapsed="true"] { grid-template-rows: 28px minmax(0, 1fr); }
.feed-menu-group { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: visible; }
.feed-group-heading { position: relative; grid-row: 1; display: flex; min-height: 34px; min-width: 0; border-bottom: 1px solid var(--border); }
.feed-group-heading .feed-tabs { flex: 1; min-width: 0; border-bottom: 0; }
.feed-menu-group[data-row="bottom"] { grid-template-rows: auto auto minmax(0, 1fr); border-top: 1px solid var(--border); }
.feed-menu-group[data-row="bottom"] > .feed-menu-list { grid-row: 3; }
.feed-menu-list { grid-row: 2; display: grid; min-width: 0; min-height: 0; overflow: visible; }
.feed-stream-toggle.cloudcanvas-ui-button { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: 26px; min-height: 28px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--text-dim); }
.feed-stream-toggle .unified-icon { width: 14px; height: 14px; }
.feed-stream-toggle[aria-expanded="true"] .unified-icon { transform: rotate(180deg); }
.feed-stream-toggle[aria-expanded="true"] :is(.feed-stream-caption, .feed-stream-flags) { display: none; }
.feed-menu[data-stream-collapsed="true"] .feed-group-heading { min-height: 28px; }
.feed-menu[data-stream-collapsed="true"] .feed-stream-toggle { width: 100%; }
.feed-stream-caption { font-size: var(--text-sm); }
.feed-stream-flags { display: flex; gap: 2px; }
.feed-stream-flag { min-width: 16px; padding: 0 3px; color: white; background: var(--accent); font-size: 10px; border-radius: 2px 2px 0 0; }
.feed-stream-flag[data-kind="alerts"] { background: var(--fail); }
.feed-stream-flag[data-kind="reminders"] { background: var(--warn); }
.feed-tabs { display: flex; align-items: stretch; min-width: 0; border-block-end: 1px solid var(--border); }
.feed-tabs .cloudcanvas-ui-tabs { flex: 1; min-width: 0; gap: 0; padding-inline: 0; }
.feed-tabs .cloudcanvas-ui-tabs-item { flex: 1 1 0; align-self: stretch; min-width: 0; }
.feed-tabs .cloudcanvas-ui-tabs-item + .cloudcanvas-ui-tabs-item { border-inline-start: 1px solid var(--border); }
.feed-tabs .cloudcanvas-ui-tabs-tab {
  flex: 1; min-width: 0; min-height: 30px; padding: 0 var(--space-1);
  font-size: var(--text-base); white-space: nowrap; border-bottom: 0; border-radius: 0;
}
/* Selected labels sit between two tapered glow strokes, not above an underline. */
.feed-tabs .cloudcanvas-ui-tabs-tab[aria-selected="true"] { border-bottom: 0; }
.feed-tabs .cloudcanvas-ui-tabs-tab::before, .feed-tabs .cloudcanvas-ui-tabs-tab::after {
  content: ""; display: none; flex: 1 1 0; min-width: 0; height: 2px; border-radius: 999px; pointer-events: none;
}
.feed-tabs .cloudcanvas-ui-tabs-tab[aria-selected="true"]::before, .feed-tabs .cloudcanvas-ui-tabs-tab[aria-selected="true"]::after {
  display: var(--feed-selection-display, block); opacity: var(--feed-selection-opacity, 0.4); filter: drop-shadow(0 0 var(--feed-selection-blur, 2px) var(--feed-selection-color, var(--accent)));
}
.feed-tabs .cloudcanvas-ui-tabs-tab[aria-selected="true"]::before { background: linear-gradient(to right, var(--feed-selection-pattern)); }
.feed-tabs .cloudcanvas-ui-tabs-tab[aria-selected="true"]::after { background: linear-gradient(to left, var(--feed-selection-pattern)); }
.feed-menu-group[data-row="top"] .feed-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.feed-menu-group[data-row="top"] .feed-list-bar { grid-column: 1; grid-row: 1; }
.feed-menu-group[data-row="top"] .feed-list-scroll { grid-column: 1; grid-row: 2; }
.feed-menu-group[data-row="top"] .feed-state { min-height: 0; align-content: start; padding: var(--space-2); }
.feed-menu-group[data-row="top"] .cloudcanvas-ui-empty-icon { display: none; }
.feed-menu-group[data-row="top"] .cloudcanvas-ui-empty-title { font-size: var(--text-base); }
.feed-menu-group[data-row="top"] .cloudcanvas-ui-empty-body { font-size: var(--text-sm); }
.activity-mailbox [hidden] { display: none !important; }
@media (pointer: coarse), (max-width: 760px) {
  .feed-menu { --feed-target: 44px; --cc-control-min: 44px; }
  .feed-group-heading { min-height: 44px; }
  .feed-stream-toggle.cloudcanvas-ui-button { min-width: 44px; }
  .feed-tabs .cloudcanvas-ui-tabs-tab { min-height: 44px; }
}

/* The upper border and central divider both resize the Stream; only a deliberate hold docks it. */
.feed-resize-edge, .feed-resize-middle { position: absolute; z-index: 3; cursor: ns-resize; touch-action: none; }
.feed-resize-edge { inset: 0 0 auto; height: 6px; }
.feed-resize-middle { inset-block: 4px; inset-inline-start: 50%; width: 10px; transform: translateX(-50%); }
.feed-resize-edge:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feed-menu[data-resizing="true"] { cursor: ns-resize; user-select: none; }
.feed-menu[data-dock-ready="true"] .feed-menu-group[data-row="top"] .feed-group-heading { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-wash); }
/* Each Stream/Feed has a slim submenu, with a dropdown/search field on the right. */
.feed-menu-group .feed-list-bar { flex-wrap: nowrap; border-bottom: 1px solid var(--border); padding: 2px 6px; }
.feed-menu-group .feed-list-lead { order: 2; margin-inline-start: auto; }
.feed-menu-group .feed-list-actions { order: 1; }
.feed-menu-group[data-row="bottom"] .feed-list-primary { font-size: var(--text-sm); }
.feed-filter { position: relative; width: 110px; min-width: 0; max-width: 100%; }
.feed-filter:focus-within, .feed-filter:has(input:not(:placeholder-shown)) { width: 170px; }
.feed-filter .feed-filter-field { box-sizing: border-box; width: 100%; min-height: 28px; padding: 3px 28px 3px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: end; font-size: var(--text-base); }
.feed-filter .feed-filter-field:hover, .feed-filter .feed-filter-field:focus { border-color: var(--border); background: var(--bg-sunken); }
.feed-filter .feed-filter-field:not(:placeholder-shown) { text-align: start; }
.feed-filter .feed-filter-field::placeholder { opacity: 1; color: var(--text-dim); }
.feed-filter-toggle.cloudcanvas-ui-button { position: absolute; inset: 0 0 auto auto; display: grid; place-items: center; min-width: 26px; width: 26px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-dim); }
.feed-filter-toggle .unified-icon { width: 13px; height: 13px; }
.feed-filter .cloudcanvas-ui-combobox { position: absolute; top: 100%; right: 0; z-index: 5; min-width: 150px; width: max-content; max-width: 260px; max-height: min(320px, 50dvh); overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); box-shadow: var(--elevation-2); }
.feed-filter .cloudcanvas-ui-combobox[hidden] { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .feed-resize-edge { height: 10px; }
  .feed-resize-middle { width: 16px; }
  .feed-filter .feed-filter-field, .feed-filter-toggle.cloudcanvas-ui-button { min-height: 44px; }
  .feed-filter-toggle.cloudcanvas-ui-button { width: 32px; }
}

/* ------------------ THE OPENED ITEM ------------------ */
.feed-detail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.feed-detail-header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--feed-gutter) var(--space-4); }
.feed-detail-heading { flex: 1; display: grid; gap: var(--space-1); min-width: 0; min-height: var(--feed-target); align-content: center; }
.feed-detail-title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.feed-detail-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
/* The item itself takes focus while it has no title to show (`components/detail.js`): its ring is drawn inside its edge. */
.feed-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feed-detail-meta { display: flex; flex-wrap: wrap; margin: 0; color: var(--text-dim); font-size: var(--text-base); }
.feed-detail-meta > * + *::before { content: "·"; margin-inline: var(--space-1); }
.feed-detail-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
:is(.feed-page, .activity-mailbox) .feed-detail-primary { min-height: var(--feed-target); padding-inline: var(--space-4); border-radius: var(--feed-radius); white-space: nowrap; }
.feed-detail-back { margin-inline-start: calc(-1 * var(--space-2)); }
.feed-detail-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 var(--feed-gutter) var(--feed-clear); }
/* The body that scrolls is a stop of the keyboard (`components/detail.js`): its ring is drawn inside its edge, which its own scroll would clip. */
.feed-detail-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* With no header above it, the body keeps the header's distance from the top. */
.feed-detail-header[hidden] + .feed-detail-body { padding-block-start: var(--space-5); }
.feed-detail-content { display: grid; gap: var(--space-4); max-width: 68ch; }
.feed-detail[data-fill="true"] .feed-detail-content { max-width: none; }
/* With nothing opened the state has the whole body, and sits in the middle of it. */
.feed-detail-body > .feed-state { flex: 1 1 auto; }
.feed-detail-body > .feed-details { padding-inline: 0; margin-block-start: var(--space-4); max-width: 68ch; }
/* The composer is pinned under the body, and clears the floating input the body would otherwise clear. */
.feed-detail-composer { padding: var(--space-3) var(--feed-gutter) var(--feed-clear); border-block-start: 1px solid var(--border); }
.feed-detail[data-composer="true"] .feed-detail-body { padding-block-end: var(--space-4); }

.feed-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-text-quiet { color: var(--text-dim); font-size: var(--text-base); }
.feed-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.feed-timeline-row { display: grid; grid-template-columns: var(--space-2) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 36px; }
.feed-timeline-time { color: var(--text-dim); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.feed-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.feed-facts-term { color: var(--text-dim); font-size: var(--text-base); align-self: center; }
.feed-facts-value { margin: 0; overflow-wrap: anywhere; }

/* Hidden means not there, whatever a rule above gave the element to lay out with. */
:is(.feed-page, .activity-mailbox) [hidden] { display: none !important; }

/* ------------------ NARROW ITEM PRESENTATION ------------------ */
@media (max-width: 760px) {
  :is(.feed-page, .activity-mailbox) { --feed-gutter: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  /* Back and the actions share the first line; the title and its meta have the full width under them. */
  .feed-detail-header { flex-wrap: wrap; padding-block: var(--space-2) var(--space-3); }
  .feed-detail-heading { order: 1; flex-basis: 100%; min-height: 0; }
  .feed-detail-actions { margin-inline-start: auto; }
}

/* ================== STAGE 1b: THE FOLDED-LIST HINT, THREAD, COMPOSER ================== */

/* The default Activity stream replaces the former empty-detail hint. */
.feed-state-hint { display: none; }

/* A thread: entries parted by space, each a head line (who, when, a word about it) over its text. */
.feed-thread { display: grid; gap: var(--space-2); min-width: 0; }
:is(.feed-page, .activity-mailbox) .feed-thread-older { justify-self: center; min-height: var(--feed-target); color: var(--text-dim); background: transparent; border-color: transparent; border-radius: var(--feed-radius); }
:is(.feed-page, .activity-mailbox) .feed-thread-older:hover { color: var(--text); background: var(--accent-wash); border-color: transparent; }
.feed-thread-entries { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.feed-thread-entry { display: grid; min-width: 0; padding-inline: var(--space-3); margin-inline: calc(-1 * var(--space-3)); border-radius: var(--feed-radius); }
.feed-thread-entry[data-selected="true"] { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.feed-thread-divider {
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0;
  color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.feed-thread-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--border); }
.feed-thread-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--feed-target); }
:is(.feed-page, .activity-mailbox) .feed-thread-head {
  flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2);
  min-width: 0; min-height: var(--feed-target); padding: var(--space-2) 0;
  color: var(--text); font: inherit; text-align: start; background: transparent; border: 0; border-radius: var(--feed-radius); cursor: pointer;
}
:is(.feed-page, .activity-mailbox) .feed-thread-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feed-thread-author { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.feed-thread-time, .feed-thread-notes { color: var(--text-dim); font-size: var(--text-base); }
.feed-thread-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed-thread-notes:empty { display: none; }
/* An entry's menu shows for the entry in hand: selected, under the pointer, or holding focus. */
:is(.feed-page, .activity-mailbox) .feed-thread-more { opacity: 0; }
.feed-thread-entry[data-selected="true"] .feed-thread-more, .feed-thread-entry:hover .feed-thread-more,
.feed-thread-entry:focus-within .feed-thread-more { opacity: 1; }
.feed-thread-body { margin: 0; padding-block-end: var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-thread-body[data-quiet="true"] { color: var(--text-dim); }
.feed-thread-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.feed-thread-extra { display: grid; gap: var(--space-2); min-width: 0; padding-block-end: var(--space-3); }
.feed-thread > .feed-state { min-height: 120px; }

/* The composer: the tab's quiet tools, then the kit's field and its one action, on one line; a notice above them. */
.feed-composer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-2); min-width: 0; }
.feed-composer-notice {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0; color: var(--text-dim); font-size: var(--text-base);
}
.feed-composer-tools { display: flex; align-items: center; }
.feed-composer-tools:empty { display: none; }
.feed-composer .cloudcanvas-ui-composer { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); min-width: 0; }
.feed-composer-tools:empty + .cloudcanvas-ui-composer { grid-column: 1 / -1; }
.feed-composer .cloudcanvas-ui-composer-input { min-height: var(--feed-target); max-height: 35vh; resize: none; field-sizing: content; }
.feed-composer .cloudcanvas-ui-composer-actions { display: flex; align-items: center; gap: var(--space-1); }
.feed-composer .cloudcanvas-ui-composer-submit { min-height: var(--feed-target); padding-inline: var(--space-4); border-radius: var(--feed-radius); }
.feed-composer .cloudcanvas-ui-voice-mic { min-height: var(--feed-target); border-radius: var(--feed-radius); }
/*
 * The voice control's question and its review need a line of their own: while either is open the field has the line, and the
 * actions wrap under it at the end. So does a narrow composer (the item view beside the page, a phone), where the field would
 * otherwise be left a word wide.
 */
.feed-composer { container-type: inline-size; }
.feed-composer .cloudcanvas-ui-composer-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.feed-composer .cloudcanvas-ui-composer:has(.cloudcanvas-ui-voice-consent:not([hidden]), .cloudcanvas-ui-voice-review:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
@container (max-width: 30rem) { .feed-composer .cloudcanvas-ui-composer { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: no-preference) {
  :is(.feed-page, .activity-mailbox) .feed-thread-more { transition: opacity var(--motion-fast) var(--ease-out); }
}

/* ================== STAGE 1b: MESSAGES ================== */

/* The list's one primary action, in words, beside the quiet Show control. */
:is(.feed-page, .activity-mailbox) .feed-list-primary { min-height: var(--feed-target); padding-inline: var(--space-3); font-size: var(--text-base); white-space: nowrap; border-radius: var(--feed-radius); }

/* A notice in an opened item is one line of its content, not a band across the menu. */
.feed-detail-content > .feed-notice { border-radius: var(--feed-radius); }

/* A form in an opened item or a dialog: each control under its caption, one primary action at its end. */
.feed-form { display: grid; gap: var(--space-4); max-width: 44ch; }
.feed-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
:is(.feed-page, .activity-mailbox) .feed-form-primary, :is(.feed-page, .activity-mailbox) .feed-form-quiet {
  min-height: var(--feed-target); padding-inline: var(--space-4); border-radius: var(--feed-radius);
}
:is(.feed-page, .activity-mailbox) .feed-form-quiet { color: var(--text-dim); background: transparent; border-color: transparent; }
:is(.feed-page, .activity-mailbox) .feed-form-quiet:hover:not(:disabled) { color: var(--text); background: var(--accent-wash); }
.feed-form-status, .feed-proposal-error { color: var(--fail); }

/* People in a conversation: rows of one height, a name, a word about them, and for the owner one quiet control. */
.feed-people { display: grid; gap: var(--space-5); min-width: min(44ch, 100%); }
.feed-people-list { display: grid; margin: 0; padding: 0; list-style: none; }
.feed-people-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: var(--feed-target); }
.feed-people-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.feed-people-note { color: var(--text-dim); font-size: var(--text-base); }

/* Making an action from a message: the new one first, then the actions already here, as rows. */
.feed-proposal { display: grid; gap: var(--space-4); min-width: min(48ch, 100%); max-width: 56ch; }
.feed-proposal-heading { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-dim); }
.feed-proposal-candidates { display: grid; max-height: 40vh; overflow-y: auto; }
:is(.feed-page, .activity-mailbox) .feed-proposal-candidate {
  justify-content: flex-start; min-height: var(--feed-target); padding-inline: var(--space-3); text-align: start;
  background: transparent; border-color: transparent; border-radius: var(--feed-radius);
}
:is(.feed-page, .activity-mailbox) .feed-proposal-candidate[aria-pressed="true"] { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.feed-proposal-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* The composer's host, over its field. */
.feed-messages-composer { display: grid; gap: var(--space-2); min-width: 0; }

/* Under a message: its files, and its editor while it is the one being edited. */
.feed-message-extra, .feed-message-files, .feed-message-edit, .feed-message-edit-form { display: grid; gap: var(--space-2); min-width: 0; }
.feed-message-files-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
:is(.feed-page, .activity-mailbox) .feed-message-file {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--feed-target); padding-inline: var(--space-3);
  color: var(--text-dim); font-size: var(--text-base); background: transparent; border-color: var(--border); border-radius: var(--feed-radius);
}
:is(.feed-page, .activity-mailbox) .feed-message-file:hover:not(:disabled) { color: var(--text); background: var(--accent-wash); }
.feed-message-file .unified-icon { width: 16px; height: 16px; }
:is(.feed-page, .activity-mailbox) .feed-message-edit-field {
  box-sizing: border-box; width: 100%; min-height: 88px; max-height: 35vh; padding: var(--space-3); resize: vertical;
  color: var(--text); font: inherit; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--feed-radius);
}
.feed-message-version { color: var(--text-dim); font-size: var(--text-base); white-space: nowrap; }
.feed-message-edit .feed-timeline-row { grid-template-columns: auto minmax(0, 1fr) auto; }

@media (max-width: 760px) {
  /* The field has the line to itself; its actions sit under it, at the end. */
  .feed-composer .cloudcanvas-ui-composer { grid-template-columns: minmax(0, 1fr); }
  .feed-composer .cloudcanvas-ui-composer-actions { justify-content: flex-end; }
  .feed-people-row { grid-template-columns: minmax(0, 1fr) auto; }
  .feed-people-note { grid-column: 1; }
}

/* ================== STAGE 2: LOGGER, REMINDERS ================== */

/*
 * Logger's tree stands where a list's rows would, in the list's own scroller, under its search. The kit's
 * tree keeps its look: said here is only where it sits and how tall a row is, so every row is one target.
 */
.feed-tree { padding: var(--space-1) var(--space-2); }
.feed-tree .cloudcanvas-ui-tree-row { min-height: var(--feed-target); }
.feed-tree .feed-tree-search { margin-block-end: var(--space-1); }
/*
 * The hint under the search is the kit's (the graph's, the timeline's): one quiet line that changes with the selection.
 * It keeps the room its longest sentence takes in this narrow column, so a selection that makes it wrap does not push
 * the rows from under the pointer.
 */
.feed-tree .feed-tree-hint { margin: 0 0 var(--space-1); min-height: 2lh; color: var(--text-dim); font-size: var(--text-sm); }
@media (max-width: 24rem) { .feed-tree .feed-tree-hint { min-height: 3lh; } }

/* A new notebook, folder or note is named in the Board's inline title field, under the hint, above the rows it goes into. */
.feed-tree .feed-tree-add { margin-block-end: var(--space-2); }

/*
 * A note, opened (phase 29, P4): where it is, its words as they read (the kit's Markdown view), its tags and where its files
 * are, above what was logged against it, at a reading width. A tag is a quiet pill; a part with nothing to say takes no room.
 */
.feed-note { display: grid; gap: var(--space-3); min-width: 0; max-width: 68ch; padding-block: var(--space-2) var(--space-4); }
.feed-note[hidden], .feed-note-words[hidden], .feed-note-tags[hidden] { display: none; }
/* The files of any other record of this device (an action, a project), under the header: the note's column. */
.feed-record-files { min-width: 0; max-width: 68ch; }
.feed-note-words { min-width: 0; overflow-wrap: anywhere; }
.feed-note-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.feed-note-tags li { padding: var(--space-1) var(--space-3); border-radius: var(--feed-radius); color: var(--text-dim); background: var(--bg-sunken); font-size: var(--text-sm); }

/* A choice in an opened item ("Remind me", "Assigned to"): its caption, then the quiet select, at a reading width. */
.feed-detail-content > .feed-field { max-width: 32ch; justify-items: start; }

/* A new action under an open list: its name, the one action that makes it, and one line about what is made. */
.feed-new { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2) var(--space-3); max-width: 56ch; }
.feed-new > .feed-text { grid-column: 1 / -1; }
:is(.feed-page, .activity-mailbox) .feed-new-action { min-height: var(--feed-target); padding-inline: var(--space-4); border-radius: var(--feed-radius); white-space: nowrap; }

/* An entry, opened: its facts, what is true of it, and its files, under its text at a reading width. */
.feed-entry-detail { display: grid; gap: var(--space-3); min-width: 0; max-width: 68ch; padding-block-end: var(--space-2); }
.feed-entry-facts { display: grid; gap: var(--space-2); min-width: 0; }
.feed-entry-files:empty { display: none; }

/* The sharing form opens in the item it is for; closed, it takes no room. */
.feed-sharing:empty { display: none; }

@media (max-width: 760px) {
  /* The name has the line to itself; the action sits under it, at the edge a thumb reaches. */
  .feed-new { grid-template-columns: minmax(0, 1fr); }
  :is(.feed-page, .activity-mailbox) .feed-new-action { justify-self: end; }
}

/* ================== THE REMINDER LINE ================== */
/*
 * Where a due reminder is said (`tabs/reminders/notify.js`): one line, in an element of its own, which the toast dock
 * (`shell/toast-dock.js`) stands at the end of the tab strip, over no page. The element has no box: the line flows in its place.
 */
.feed-reminder-toasts { display: contents; }


/* Temporal event identity is shown above its authorized owning record's log. */
.itinerary-detail { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; height: 100%; }
.itinerary-event-summary { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.itinerary-event-summary h2 { margin: 0 0 4px; font-size: var(--text-lg); }
.itinerary-event-summary p, .itinerary-owner-label { margin: 4px 0; font-size: var(--text-sm); color: var(--text-dim); }
.itinerary-record-frame { grid-row: 2; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.itinerary-record-frame > div { grid-row: 2; display: grid; min-height: 0; }
.itinerary-owner-label { padding: 8px 24px; }