/* Written by Richard Christopher, Copyright 2026 Mindfull */
/* Shared workspace surfaces. Top-bar and scoped-toolbar layout: workspace-layout.css. */
.unified-workspace {
  position: absolute; inset: 0; z-index: 20; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  color: var(--text); background: var(--bg);
  font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-normal);
  /* Toasts clear safe areas, page composers and the open Feed rail. */
  --cc-ui-toast-inset-bottom: max(env(safe-area-inset-bottom), calc(var(--unified-foot, 0px) + var(--space-2)));
  --cc-ui-toast-inset-right: calc(var(--space-3) + var(--unified-right-rail, 0px));
}
/* One toast column; newest entries stand nearest the bottom. */
.unified-toasts {
  position: fixed; z-index: var(--cc-z-ui-toast, 1300);
  inset: auto var(--cc-ui-toast-inset-right) var(--cc-ui-toast-inset-bottom) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;
}
.unified-toasts .cloudcanvas-ui-toasts { position: static; inset: auto; }
.unified-toasts .cloudcanvas-ui-toasts:empty { display: none; }
/* Older toasts remain available behind the expandable stack's count chip. */
.unified-toasts [data-folded] { display: none; }
.unified-toasts-more.cloudcanvas-ui-button {
  align-self: center; min-height: 28px; padding: 0 var(--space-3); pointer-events: auto;
  color: var(--text); font-size: var(--text-sm); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: var(--elevation-1);
}
.unified-toasts-more.cloudcanvas-ui-button[hidden] { display: none; }
.unified-toasts-more.cloudcanvas-ui-button:hover { background: var(--accent-wash); }
.unified-toasts-more.cloudcanvas-ui-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-toasts[data-expanded] { max-height: min(60vh, 28rem); max-height: min(60dvh, 28rem); overflow-y: auto; pointer-events: auto; }
.unified-toasts[data-expanded] .unified-toasts-more.cloudcanvas-ui-button { position: sticky; top: 0; z-index: 1; flex: none; }
@media (pointer: coarse), (max-width: 760px) {
  .unified-toasts-more.cloudcanvas-ui-button { min-height: 44px; min-width: 44px; }
}
/* Mobile toasts expand their two-line message on hover or keyboard focus. */
@media (max-width: 760px) {
  .unified-toasts { gap: var(--space-1); }
  .unified-toasts .cloudcanvas-ui-toast { padding-block: var(--space-1); line-height: 1.3; }
  .unified-toasts .cloudcanvas-ui-toast-message {
    min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .unified-toasts .cloudcanvas-ui-toast:is(:hover, :focus-within) .cloudcanvas-ui-toast-message { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
}
/* Due reminders use an inline desktop line and a compact mobile count chip. */
.unified-reminders { flex: 0 1 auto; display: flex; align-items: center; align-self: center; gap: var(--space-2); min-width: 0; max-width: 60%; }
.unified-reminder-chip { display: inline-flex; flex: none; }
.unified-reminder-chip[hidden] { display: none; }
.unified-reminder-chip-button.cloudcanvas-ui-button {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-3);
  color: var(--text); font-size: var(--text-base); background: var(--bg-raised); border: 1px solid var(--warn); border-radius: var(--radius-full);
}
.unified-reminder-chip-button.cloudcanvas-ui-button:hover { background: var(--accent-wash); }
.unified-reminder-chip-button.cloudcanvas-ui-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-reminder-chip-count { display: inline-flex; align-items: center; }
@media (min-width: 761px) {
  .unified-reminders .cloudcanvas-ui-toasts { position: static; inset: auto; display: flex; gap: var(--space-2); min-width: 0; }
  .unified-reminders .cloudcanvas-ui-toasts:empty { display: none; }
  .unified-reminders .cloudcanvas-ui-toast { min-width: 0; padding-block: 0; box-shadow: none; }
  .unified-reminders .cloudcanvas-ui-toast-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .unified-reminders:has(.cloudcanvas-ui-toast[data-tone="warning"]) .unified-reminder-chip { display: none; }
}
@media (pointer: coarse), (max-width: 760px) {
  .unified-reminder-chip-button.cloudcanvas-ui-button { min-height: 44px; min-width: 44px; }
}
/* Inline reminder controls retain touch targets without adding a border row. */
@media (min-width: 761px) and (pointer: coarse) {
  .unified-reminders .cloudcanvas-ui-toast { border-block-width: 0; }
}
@media (max-width: 760px) {
  .unified-reminders .cloudcanvas-ui-toast[data-tone="warning"] { display: none; }
  /* Separate the mobile reminder region from the workspace toast stack. */
  .unified-workspace:has(.unified-toasts .cloudcanvas-ui-toast) .unified-reminders .cloudcanvas-ui-toasts { bottom: calc(var(--cc-ui-toast-inset-bottom) + var(--space-7) * 2); }
}
@media (prefers-reduced-motion: no-preference) {
  .unified-reminder-chip { animation: unified-reminder-in var(--motion-base) var(--ease-out); }
}
@keyframes unified-reminder-in { from { opacity: 0; } to { opacity: 1; } }
.unified-header {
  grid-area: header; display: flex; align-items: center; border-bottom: 1px solid var(--border);
}
.unified-brand {
  display: grid; place-items: center; background: none; border: 0; color: inherit;
  border-radius: var(--radius-lg); cursor: pointer;
}
/* Save status is a quiet accessible information control, marked on failure. */
.unified-save-toggle { padding: 0; border-radius: 6px; cursor: pointer; }
.unified-save-toggle:hover { color: var(--text); background: var(--accent-wash); }
.unified-save-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-save-toggle[aria-expanded="true"] { color: var(--text); background: var(--accent-wash); }
.unified-save-toggle[data-attention="true"] { color: var(--warn); }
.unified-save-line { width: 22rem; max-width: 100%; font-size: var(--text-base); color: var(--text-dim); }
.unified-find { position: relative; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.unified-search {
  flex: 1; min-width: 120px; border: 1px solid var(--border-field); background: var(--bg-sunken); color: inherit;
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font: inherit;
  resize: none; box-sizing: border-box; line-height: 1.4; overflow-y: auto;
}
.unified-button {
  border: 1px solid var(--border-strong); background: var(--bg-raised); color: inherit;
  border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); cursor: pointer; font: inherit;
}
.unified-button:hover { background: var(--accent-wash); }
.unified-button:focus-visible,
.unified-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-context-row { display: flex; gap: 2px; min-width: 0; }
/* Shared strip structure; density and placement belong to workspace-layout.css. */
.unified-tabs-host { flex: 1; min-width: 0; }
.unified-context-back { flex: none; padding: 0; border: 0; background: transparent; color: var(--text-dim); border-radius: 6px; cursor: pointer; }
.unified-context-back .unified-icon { width: 16px; height: 16px; }
.unified-context-back:hover { background: var(--accent-wash); color: var(--text); }
.unified-context-back:disabled { opacity: .35; cursor: default; }
.unified-context-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* One main view; item and resource details live in floating Contexts. */
.unified-main {
  grid-area: main; min-width: 0; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "panes";
}
.unified-panes {
  grid-area: panes; min-height: 0; display: grid; gap: var(--space-1);
  grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
  padding: 0;
}
.unified-pane { min-width: 0; min-height: 0; overflow: auto; scroll-padding-bottom: env(safe-area-inset-bottom); }
/* A pane takes the focus when the control that held it has left (`shell/place.js`): the ring says where the keyboard is. */
.unified-pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.unified-pane[hidden] { display: none; }
.unified-presentation { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); min-height: 100%; box-sizing: border-box; }
/* Fill-layout views own their internal scrolling. */
.unified-presentation[data-layout="fill"] { height: 100%; padding-bottom: 0; }
.unified-unavailable { display: grid; place-items: center; min-height: 50vh; padding: var(--space-6); }
.unified-search-results {
  min-width: 0; overflow: auto; box-sizing: border-box;
}
.unified-find[data-in-dialog] .unified-search-results { flex-basis: 100%; }
.unified-search-coverage { font-size: var(--text-sm); color: var(--text-dim); margin: 0; width: 100%; }
.unified-search-coverage:empty { display: none; }
.unified-field { display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
/* The grid rule above outranks the UA's [hidden]; a field a capture kind does not ask for must not show. */
.unified-field[hidden] { display: none; }
.unified-input {
  min-height: 44px; padding: var(--space-2); border: 1px solid var(--border-field); border-radius: 6px;
  color: inherit; background: var(--bg-sunken); font: inherit;
}
.unified-message { line-height: var(--leading-normal); }
.unified-capture { min-width: min(420px, 70vw); }
/* The dialog's one primary action, at a full target; what it says of who sees the capture is a quiet line. */
.unified-capture .unified-button.is-primary { min-height: 44px; padding-inline: var(--space-4); border-radius: 6px; }
.unified-capture-audience { margin: var(--space-2) 0; color: var(--text-dim); font-size: var(--text-base); }
/* The range a capture was opened on (a length, or a last day), under the time it goes with. */
.unified-capture-span { margin: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-capture-kinds { margin: var(--space-3) 0; }
.unified-capture-daily { margin: 0 0 var(--space-3); }
/*
 * A choice drawn with the kit's chips (`single: true` for one of several): the capture kind, the day-note toggle, the
 * pane switch, Edit | Preview. The kit draws the chip and its states; this gives it the pill and the accent a
 * chosen one wears.
 */
.unified-choice .cloudcanvas-ui-chips { gap: var(--space-2); }
.unified-choice .cloudcanvas-ui-chips-chip { border-color: var(--border-strong); border-radius: var(--radius-full); background: var(--bg-raised); font-size: inherit; overflow: hidden; }
.unified-choice .cloudcanvas-ui-chips-chip:has([aria-pressed="true"]) { border-color: var(--accent); }
.unified-choice .cloudcanvas-ui-chips-toggle { min-height: 36px; padding: var(--space-1) var(--space-4); }
/* Under a finger a choice is a full target, at a tablet as at a phone (the 760px rule below holds the phone's). */
@media (pointer: coarse) { .unified-choice .cloudcanvas-ui-chips-toggle { min-height: 44px; } }
.unified-choice .cloudcanvas-ui-chips-toggle[aria-pressed="true"] { color: var(--accent); background: var(--accent-wash); }
.unified-gate-error {
  position: absolute; z-index: 80; inset: 35% 20% auto; padding: var(--space-5);
  background: var(--bg-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
}
/*
 * THE ITEM VIEW: one entity, beside a tab or in a tab of its own. One surface, with no box inside the
 * pane: its head is the item's name and the one quiet icon that closes it; each region under it has one
 * primary action, and every other action in words is quiet (`.unified-item-quiet`) until it is pointed at.
 */
.unified-item { display: grid; gap: var(--space-3); align-content: start; box-sizing: border-box; max-width: 44rem; padding: var(--space-4) var(--space-5); }
.unified-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.unified-item-title { margin: 0; min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.unified-item .unified-item-quiet { min-height: 44px; padding-inline: var(--space-3); color: var(--text-dim); background: transparent; border-color: transparent; border-radius: 6px; }
.unified-item .unified-item-quiet:hover:not(:disabled) { color: var(--text); background: var(--accent-wash); border-color: transparent; }
.unified-item .unified-item-quiet.is-danger { color: var(--fail); }
.unified-item .cloudcanvas-ui-button.is-primary { min-height: 44px; padding-inline: var(--space-4); border-radius: 6px; }
.unified-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.unified-item-actions .is-danger { margin-inline-start: auto; }
.unified-item-note { margin: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-item-note:empty { display: none; }
.unified-item-source { margin: 0; color: var(--text-dim); font-size: var(--text-sm); }
.unified-item-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.unified-item-key { color: var(--text-dim); }
.unified-item-value { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.unified-item-status[hidden] { display: none; }
@media (max-width: 760px) {
  /* Panes in a single column. A pair stacks: one pane shows at a time, chosen by the two-button switch. */
  .unified-button, .unified-choice .cloudcanvas-ui-chips-toggle { min-height: var(--space-7); }
}

/* Shared icon and accessible-label primitives. */
.unified-icon { width: 20px; height: 20px; flex-shrink: 0; }
.unified-brand img { border-radius: var(--radius-sm); }
.unified-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unified-brand[aria-current="page"] { background: var(--accent-wash); }
.unified-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Shared input chrome; its top-bar placement is defined in workspace-layout.css. */
.unified-input-line { display: flex; align-items: flex-end; gap: 0; border: 1px solid var(--border-field); border-radius: 24px; background: var(--bg-raised); box-shadow: var(--elevation-3); overflow: hidden; }
.unified-input-line:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash), var(--elevation-3); }
.unified-input-line .unified-input-action { flex: none; align-self: flex-end; width: 40px; height: 44px; padding: 0; border: 0; border-radius: 0 24px 24px 0; background: var(--accent-wash); color: var(--accent); cursor: pointer; }
.unified-input-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.unified-input-action .unified-icon { width: 18px; height: 18px; }
.unified-input-panel { display: grid; gap: 8px; overflow: auto; box-sizing: border-box; padding: 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-raised); box-shadow: var(--elevation-3); }
.unified-input-panel[hidden] { display: none; }
.unified-input-panel .unified-input-notice:empty { display: none; }
.unified-input-help { font-size: var(--text-base); line-height: 1.5; color: var(--text-dim); margin: 0; }
/* The panel's action, usage hint and quiet accessible information control. */
.unified-input-foot { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; }
.unified-input-foot .unified-input-primary { min-height: 44px; padding-inline: var(--space-4); border-radius: 6px; }
.unified-input-foot .feed-details { padding: 0; }
.unified-input-filters:empty { display: none; }
/* The place the page is narrowed to: the select takes the room, the control that refreshes its list stands beside it. */
.unified-input-panel .context-filter-within { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.unified-input-panel .context-filter-scope { flex: 1; min-width: 0; }
.unified-input-panel .context-filter-coverage { flex-basis: 100%; }
.unified-input-panel :is(.context-filter-notice, .context-filter-coverage, .unified-input-target-status):empty { display: none; }
.unified-input-target { display: flex; flex: none; align-items: center; gap: 3px; max-width: 36%; min-width: 0; padding-left: 12px; font-size: var(--text-sm); color: var(--accent); }
.unified-input-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unified-input-target button { flex: none; width: 24px; min-height: 32px; padding: 0; border: 0; background: transparent; color: inherit; }
.unified-input-target[hidden] { display: none; }
.unified-input-target-status { font-size: var(--text-sm); line-height: 1.5; color: var(--text-dim); margin: 0; overflow-wrap: anywhere; }
.unified-find[data-in-dialog] .unified-input-panel { position: static; width: 100%; max-height: 50vh; }
.unified-input-panel :where(button,select) { font-size: var(--text-base); }
.unified-input-panel :is(.context-filter-notice, .context-filter-coverage, .unified-search-coverage, .unified-input-notice) { font-size: var(--text-base); }
.unified-input-panel .context-filters { min-width: 0; }
.unified-input-notice { width: 100%; font-size: var(--text-sm); margin: 0; color: var(--text-dim); }
.unified-update-notice {
  position: fixed; z-index: 75; left: 16px; top: 16px; max-width: min(480px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--bg-raised);
  color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--elevation-3);
}
.unified-update-notice[hidden] { display: none; }
.unified-pane :where(button, input, textarea, select) { scroll-margin-block-start: 16px; }
@media (max-width: 760px) {
  /* Dialog input actions retain full touch targets. */
  .unified-input-line .unified-input-action { width: 44px; }
}

/* A workspace control, not a tab: its floating region shares the main grid area. */
.unified-mailbox-button-host { display: flex; align-items: center; flex: none; margin-inline-start: auto; }
.unified-mailbox-button.cloudcanvas-ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: 38px; min-height: 30px; padding: 0 var(--space-2);
  color: var(--text-dim); background: transparent; border: 0; border-radius: var(--radius);
}
.unified-mailbox-button .unified-icon { width: 19px; height: 19px; }
.unified-mailbox-button[aria-expanded="true"] { color: var(--accent); background: var(--accent-wash); }
.unified-mailbox-button:hover { color: var(--text); background: var(--accent-wash); }
.unified-mailbox-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.unified-mailbox-layer { grid-area: main; position: relative; min-width: 0; min-height: 0; z-index: 90; pointer-events: none; clip-path: inset(0); }
.unified-mailbox-layer .activity-mailbox {
  position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-3);
  box-sizing: border-box; width: min(360px, calc(100% - var(--space-6))); height: calc(100% - var(--space-5));
  min-height: 0; overflow: hidden; pointer-events: auto;
  color: var(--text); background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--space-4); box-shadow: var(--elevation-2);
}
@media (pointer: coarse), (max-width: 760px) {
  .unified-mailbox-button.cloudcanvas-ui-button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 760px) {
  .unified-mailbox-layer .activity-mailbox {
    inset-inline-end: var(--space-2); width: calc(100% - var(--space-4));
  }
}