@unson/brainbase-mcp 0.41.10 → 0.41.13

package/ui/meeting-minutes.js

@@ -7,12 +7,27 @@
  *
  * List order and labels are a projection. Canonical records are not rewritten.
  * Calendar links stay out until a meeting-side event id is verified.
+ * Filters and sort only narrow the loaded list; the host owns any filter that
+ * changes what it asks the server for (story-meeting-minutes-list-filters-v1).
  */
 
+import { workspaceCombobox } from './workspace-kit.js';
+
 export const MEETING_MINUTES_UI_CONTRACT_VERSION = 'brainbase.meeting-minutes-ui.v1';
 
 const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];
 const TOKYO = 'Asia/Tokyo';
+const SORTS = Object.freeze([
+  { value: 'scheduled-desc', label: '会議の日時が新しい順' },
+  { value: 'scheduled-asc', label: '会議の日時が古い順' },
+  { value: 'updated-desc', label: '議事録の更新が新しい順' },
+]);
+const STATE_FILTERS = Object.freeze([
+  { value: '', label: 'すべての状態' },
+  { value: 'pending', label: '確認待ち' },
+  { value: 'confirmed', label: '確認済み' },
+]);
+const EMPTY_FILTERS = Object.freeze({ query: '', from: '', to: '', participant: '', status: '' });
 
 function tokyoParts(date) {
   const parts = new Intl.DateTimeFormat('en-US', {
@@ -279,19 +294,71 @@ function byCreatedAt(versions) {
     .map((item) => item.version);
 }
 
-function sortMeetings(meetings) {
+function updatedTime(entry) {
+  let latest = latestVersionTime(entry);
+  for (const documentRecord of Array.isArray(entry?.minutes) ? entry.minutes : []) {
+    const date = parseDate(documentRecord?.updated_at);
+    if (date && (!latest || date > latest)) latest = date;
+  }
+  return latest ?? importTime(entry);
+}
+
+function sortMeetings(meetings, sort = 'scheduled-desc') {
+  const byUpdate = sort === 'updated-desc';
+  const direction = sort === 'scheduled-asc' ? 1 : -1;
   return meetings
-    .map((entry, index) => ({ entry, index, timing: meetingTiming(entry) }))
+    .map((entry, index) => {
+      const timing = meetingTiming(entry);
+      const updated = byUpdate ? updatedTime(entry) : null;
+      return {
+        entry,
+        index,
+        bottom: byUpdate ? !updated : timing.kind === 'unregistered',
+        at: byUpdate ? updated?.getTime() ?? Number.NEGATIVE_INFINITY : timing.at,
+      };
+    })
     .sort((left, right) => {
-      const leftBottom = left.timing.kind === 'unregistered';
-      const rightBottom = right.timing.kind === 'unregistered';
-      if (leftBottom !== rightBottom) return leftBottom ? 1 : -1;
-      if (left.timing.at !== right.timing.at) return right.timing.at - left.timing.at;
+      if (left.bottom !== right.bottom) return left.bottom ? 1 : -1;
+      // Meetings without a date keep the newest import first in every order.
+      if (left.at !== right.at) return left.bottom ? right.at - left.at : (left.at - right.at) * direction;
       return left.index - right.index;
     })
     .map((item) => item.entry);
 }
 
+function searchText(value) {
+  return String(value ?? '').normalize('NFKC').toLocaleLowerCase('ja');
+}
+
+function tokyoDateValue(date) {
+  const { year, month, day } = tokyoParts(date);
+  return `${year}-${pad(month)}-${pad(day)}`;
+}
+
+function participantsOf(entry) {
+  const ids = entry?.meeting?.participant_ids;
+  return Array.isArray(ids) ? ids.map((id) => text(id)).filter(Boolean) : [];
+}
+
+function matchesFilters(entry, filters) {
+  const terms = searchText(filters.query).split(/\s+/u).filter(Boolean);
+  if (terms.length) {
+    const documents = Array.isArray(entry?.minutes) ? entry.minutes : [];
+    const haystack = searchText([entry?.meeting?.title, ...documents.map((documentRecord) => documentRecord?.title)].join('\n'));
+    if (!terms.every((term) => haystack.includes(term))) return false;
+  }
+  if (filters.from || filters.to) {
+    const timing = meetingTiming(entry);
+    if (!timing.date) return false;
+    const day = tokyoDateValue(timing.date);
+    if (filters.from && day < filters.from) return false;
+    if (filters.to && day > filters.to) return false;
+  }
+  if (filters.participant && !participantsOf(entry).includes(filters.participant)) return false;
+  if (filters.status && listState(entry)?.code !== filters.status) return false;
+  return true;
+}
+
 function idempotencyKey() {
   const random = typeof globalThis.crypto?.randomUUID === 'function'
     ? globalThis.crypto.randomUUID()
@@ -570,7 +637,9 @@ export function createMeetingMinutesUI({
   meetingLabel,
   meetingConnections,
   canCreateMeeting,
+  createUnavailableReason,
   canEditMinutes,
+  hostFilters = [],
   currentPrincipalId,
   now = () => new Date(),
 } = {}) {
@@ -590,6 +659,8 @@ export function createMeetingMinutesUI({
     loading: false,
     listError: null,
     detailError: null,
+    filters: { ...EMPTY_FILTERS },
+    sort: SORTS[0].value,
     // Which document is being edited or about to be withdrawn; both reset on every detail load.
     editingMinutesId: null,
     withdrawingMinutesId: null,
@@ -598,6 +669,7 @@ export function createMeetingMinutesUI({
   };
   let listRequestGeneration = 0;
   let detailRequestGeneration = 0;
+  let createReasonSequence = 0;
   let connectionsSlot = null;
   let railProjectSlot = null;
   let railProjectMeeting = null;
@@ -610,6 +682,10 @@ export function createMeetingMinutesUI({
     makeElement(doc, 'p', { className: 'bb-minutes-lead', textContent: '新しい会議から読み、確認待ちを見つけて確認します。' }),
   );
   const status = makeElement(doc, 'p', { className: 'bb-minutes-status', attrs: { role: 'status', 'aria-live': 'polite' } });
+  const toolbar = makeElement(doc, 'div', {
+    className: 'bb-minutes-toolbar',
+    attrs: { role: 'search', 'aria-label': '議事録の絞り込みと並べ替え' },
+  });
   const columns = makeElement(doc, 'div', { className: 'bb-minutes-columns' });
   const listPane = makeElement(doc, 'section', {
     className: 'bb-minutes-list-pane',
@@ -617,9 +693,127 @@ export function createMeetingMinutesUI({
   });
   const detailPane = makeElement(doc, 'section', { className: 'bb-minutes-detail-pane', attrs: { 'aria-label': '議事録詳細' } });
   columns.append(listPane, detailPane);
-  screen.append(heading, status, columns);
+  screen.append(heading, status, toolbar, columns);
   root.replaceChildren(screen);
 
+  function filterField(label, control, className = '') {
+    const field = makeElement(doc, 'div', { className: `bb-minutes-filter-field${className ? ` ${className}` : ''}` });
+    field.append(makeElement(doc, 'span', { className: 'bb-minutes-label', textContent: label }), control);
+    return field;
+  }
+
+  function filterCombobox(label, options, value, onChange) {
+    return workspaceCombobox(doc, { label, options, value, className: 'bb-minutes-filter-combobox', onChange });
+  }
+
+  const keyword = makeElement(doc, 'input', {
+    className: 'bb-minutes-input bb-minutes-filter-keyword',
+    type: 'search',
+    attrs: { 'aria-label': '会議名・議事録名で絞り込む', placeholder: '会議名・議事録名', autocomplete: 'off' },
+  });
+  keyword.addEventListener('input', () => { state.filters.query = keyword.value; renderList(); });
+  const fromInput = makeElement(doc, 'input', { className: 'bb-minutes-input', type: 'date', attrs: { 'aria-label': '期間の始め' } });
+  const toInput = makeElement(doc, 'input', { className: 'bb-minutes-input', type: 'date', attrs: { 'aria-label': '期間の終わり' } });
+  fromInput.addEventListener('change', () => { state.filters.from = fromInput.value; renderList(); });
+  toInput.addEventListener('change', () => { state.filters.to = toInput.value; renderList(); });
+  const period = makeElement(doc, 'span', { className: 'bb-minutes-filter-period' });
+  period.append(fromInput, makeElement(doc, 'span', { className: 'bb-minutes-filter-period-sep', textContent: '〜', attrs: { 'aria-hidden': 'true' } }), toInput);
+  const participantBox = filterCombobox('参加者', [{ value: '', label: 'すべての参加者' }], '', (value) => { state.filters.participant = value; renderList(); });
+  const statusBox = filterCombobox('確認の状態', STATE_FILTERS, '', (value) => { state.filters.status = value; renderList(); });
+  const sortBox = filterCombobox('並べ替え', SORTS, state.sort, (value) => { state.sort = value; renderList(); });
+  const hostSlot = makeElement(doc, 'div', { className: 'bb-minutes-filter-host' });
+  const participantField = filterField('参加者', participantBox.root);
+  const statusField = filterField('確認の状態', statusBox.root);
+  const reset = button(doc, '条件を外す', () => clearFilters(), { className: 'bb-minutes-button bb-minutes-filter-reset' });
+  toolbar.append(
+    filterField('キーワード', keyword, 'is-keyword'),
+    hostSlot,
+    filterField('期間', period, 'is-period'),
+    participantField,
+    statusField,
+    filterField('並べ替え', sortBox.root),
+    reset,
+  );
+  const hostBoxes = new Map();
+
+  function currentHostFilters() {
+    let filters = hostFilters;
+    if (typeof filters === 'function') {
+      try { filters = filters(); } catch { filters = []; }
+    }
+    return (Array.isArray(filters) ? filters : []).filter((filter) => isRecord(filter) && text(filter.id));
+  }
+
+  function clientFiltersActive() {
+    return Object.keys(EMPTY_FILTERS).some((key) => Boolean(state.filters[key]));
+  }
+
+  function filtersActive() {
+    return clientFiltersActive() || currentHostFilters().some((filter) => text(filter.value));
+  }
+
+  function clearFilters() {
+    state.filters = { ...EMPTY_FILTERS };
+    keyword.value = '';
+    fromInput.value = '';
+    toInput.value = '';
+    for (const filter of currentHostFilters()) {
+      if (text(filter.value) && typeof filter.onChange === 'function') filter.onChange('');
+    }
+    renderList();
+  }
+
+  function renderToolbar(meetings) {
+    const hosts = currentHostFilters();
+    const seen = new Set();
+    for (const filter of hosts) {
+      const id = text(filter.id);
+      seen.add(id);
+      const options = Array.isArray(filter.options) ? filter.options : [];
+      const value = text(filter.value);
+      let entry = hostBoxes.get(id);
+      if (!entry) {
+        const box = workspaceCombobox(doc, {
+          label: text(filter.label, id),
+          options,
+          value,
+          placeholder: text(filter.placeholder, '選択してください'),
+          className: 'bb-minutes-filter-combobox',
+          onChange: (next) => {
+            const current = currentHostFilters().find((candidate) => text(candidate.id) === id);
+            if (typeof current?.onChange === 'function') current.onChange(next);
+          },
+        });
+        entry = { box, field: filterField(text(filter.label, id), box.root) };
+        hostBoxes.set(id, entry);
+      }
+      entry.box.update({ options, value, disabled: filter.disabled === true });
+    }
+    for (const [id, entry] of hostBoxes) {
+      if (seen.has(id)) continue;
+      entry.box.destroy();
+      hostBoxes.delete(id);
+    }
+    hostSlot.replaceChildren(...hosts.map((filter) => hostBoxes.get(text(filter.id)).field));
+    hostSlot.hidden = hosts.length === 0;
+
+    // Offer only the conditions the loaded records can answer (P9).
+    const participants = [...new Set(meetings.flatMap(participantsOf))]
+      .sort((left, right) => left.localeCompare(right, 'ja', { numeric: true }));
+    if (state.filters.participant && !participants.includes(state.filters.participant)) state.filters.participant = '';
+    participantBox.update({
+      options: [{ value: '', label: 'すべての参加者' }, ...participants.map((participant) => ({ value: participant, label: participant }))],
+      value: state.filters.participant,
+    });
+    participantField.hidden = participants.length === 0;
+    const hasStates = meetings.some((entry) => listState(entry));
+    if (!hasStates) state.filters.status = '';
+    statusBox.update({ value: state.filters.status });
+    statusField.hidden = !hasStates;
+    sortBox.update({ value: state.sort });
+    reset.hidden = !filtersActive();
+  }
+
   function clock() {
     try {
       const value = typeof now === 'function' ? now() : new Date();
@@ -673,6 +867,34 @@ export function createMeetingMinutesUI({
     return canCreateMeeting !== false;
   }
 
+  /** One short reason from the host, shown beside a create button that cannot be pressed. */
+  function createReason() {
+    if (typeof createUnavailableReason === 'function') {
+      try {
+        return text(createUnavailableReason());
+      } catch {
+        return '';
+      }
+    }
+    return text(createUnavailableReason);
+  }
+
+  function appendCreateUnavailable(parent) {
+    const reason = createReason();
+    if (!reason) return;
+    const id = `bb-minutes-create-reason-${++createReasonSequence}`;
+    parent.append(
+      makeElement(doc, 'button', {
+        className: 'bb-minutes-button is-primary',
+        textContent: '会議を作成',
+        type: 'button',
+        disabled: true,
+        attrs: { type: 'button', 'aria-describedby': id },
+      }),
+      makeElement(doc, 'span', { className: 'bb-minutes-create-reason', textContent: reason, attrs: { id } }),
+    );
+  }
+
   function canEdit() {
     if (typeof canEditMinutes === 'function') {
       try {
@@ -840,7 +1062,7 @@ export function createMeetingMinutesUI({
     parent.append(notice);
   }
 
-  function renderMeetingRow(entry) {
+  function renderMeetingRow(entry, { flat = false } = {}) {
     const meeting = entry.meeting;
     const timing = meetingTiming(entry);
     const item = makeElement(doc, 'button', {
@@ -854,10 +1076,19 @@ export function createMeetingMinutesUI({
     }));
     const line = makeElement(doc, 'span', { className: 'bb-minutes-item-line' });
     if (timing.kind === 'scheduled') {
-      appendLinePart(line, makeElement(doc, 'span', { textContent: formatClock(timing.date) }));
+      // Without date headings the row carries its own date.
+      const when = flat ? `${formatMonthDay(timing.date)} ${formatClock(timing.date)}` : formatClock(timing.date);
+      appendLinePart(line, makeElement(doc, 'span', { textContent: when }));
     } else if (timing.kind === 'fallback' || (timing.kind === 'unregistered' && timing.date)) {
       appendLinePart(line, makeElement(doc, 'span', { textContent: unscheduledLabel(timing) }));
     }
+    if (flat) {
+      const updated = updatedTime(entry);
+      appendLinePart(line, makeElement(doc, 'span', {
+        className: 'bb-minutes-item-updated',
+        textContent: updated ? `更新 ${formatMonthDay(updated)} ${formatClock(updated)}` : '更新日時は未記録',
+      }));
+    }
     const label = meetingLabelText(meetingLabel, meeting);
     if (label) appendLinePart(line, makeElement(doc, 'span', { className: 'bb-minutes-meeting-label', textContent: label }));
     const rowState = listState(entry);
@@ -875,17 +1106,19 @@ export function createMeetingMinutesUI({
     clear(listPane);
     const head = makeElement(doc, 'div', { className: 'bb-minutes-pane-head' });
     const meetings = state.meetings.filter((entry) => isRecord(entry?.meeting) && typeof entry.meeting.meeting_id === 'string');
+    renderToolbar(meetings);
+    const visible = sortMeetings(meetings.filter((entry) => matchesFilters(entry, state.filters)), state.sort);
     if (canCreate()) {
       head.append(button(doc, '会議を作成', () => renderCreateForm(), { className: 'bb-minutes-button is-primary' }));
+    } else {
+      appendCreateUnavailable(head);
     }
-    head.append(makeElement(doc, 'p', { className: 'bb-minutes-sort-note', textContent: `新しい順・${meetings.length}件` }));
+    const narrowed = clientFiltersActive();
+    head.append(makeElement(doc, 'p', {
+      className: 'bb-minutes-sort-note',
+      textContent: narrowed ? `${meetings.length}件中${visible.length}件` : `${meetings.length}件`,
+    }));
     listPane.append(head);
-    if (!canCreate()) {
-      listPane.append(makeElement(doc, 'p', {
-        className: 'bb-minutes-create-guard',
-        textContent: '会議を作成する権限がありません。作成はプロジェクトの編集権限がある人が行います。',
-      }));
-    }
     if (state.listError) {
       appendLoadError(listPane, `会議一覧を読み込めませんでした。理由: ${state.listError}`, () => loadMeetings({ restoreFocus: true }));
     }
@@ -893,14 +1126,27 @@ export function createMeetingMinutesUI({
       if (state.listError) return;
       listPane.append(makeElement(doc, 'p', {
         className: 'bb-minutes-empty',
-        textContent: 'まだ議事録はありません。会議を取り込むと、ここに新しい順で並びます。',
+        textContent: filtersActive()
+          ? '条件に合う会議はありません。'
+          : 'まだ議事録はありません。会議を取り込むと、ここに新しい順で並びます。',
       }));
+      if (filtersActive()) listPane.append(button(doc, '条件を外す', () => clearFilters()));
+      return;
+    }
+    if (visible.length === 0) {
+      listPane.append(makeElement(doc, 'p', { className: 'bb-minutes-empty', textContent: '条件に合う会議はありません。' }));
+      listPane.append(button(doc, '条件を外す', () => clearFilters()));
       return;
     }
     const list = makeElement(doc, 'div', { className: 'bb-minutes-meeting-list' });
+    if (state.sort === 'updated-desc') {
+      for (const entry of visible) list.append(renderMeetingRow(entry, { flat: true }));
+      listPane.append(list);
+      return;
+    }
     const today = clock();
     let currentKey = null;
-    for (const entry of meetings) {
+    for (const entry of visible) {
       const timing = meetingTiming(entry);
       if (timing.kind === 'unregistered') continue;
       const key = dateKey(timing.date);
@@ -913,7 +1159,7 @@ export function createMeetingMinutesUI({
       }
       list.append(renderMeetingRow(entry));
     }
-    const unregistered = meetings.filter((entry) => meetingTiming(entry).kind === 'unregistered');
+    const unregistered = visible.filter((entry) => meetingTiming(entry).kind === 'unregistered');
     if (unregistered.length) {
       list.append(makeElement(doc, 'h3', {
         className: 'bb-minutes-date-heading',
@@ -1259,14 +1505,17 @@ export function createMeetingMinutesUI({
     }
   }
 
+  function renderCreateUnavailable() {
+    clear(detailPane);
+    detailPane.append(makeElement(doc, 'p', { className: 'bb-minutes-empty', textContent: '議事録を選ぶと、ここに本文が出ます。' }));
+    const reason = createReason();
+    if (reason) detailPane.append(makeElement(doc, 'p', { className: 'bb-minutes-create-reason', textContent: reason }));
+  }
+
   function renderCreateForm() {
     clear(detailPane);
     if (!canCreate()) {
-      detailPane.append(makeElement(doc, 'p', { className: 'bb-minutes-empty', textContent: '議事録を選ぶと、ここに本文が出ます。' }));
-      detailPane.append(makeElement(doc, 'p', {
-        className: 'bb-minutes-create-guard',
-        textContent: '会議を作成する権限がありません。作成はプロジェクトの編集権限がある人が行います。',
-      }));
+      renderCreateUnavailable();
       return;
     }
     const form = makeElement(doc, 'form', { className: 'bb-minutes-create-form' });
@@ -1284,12 +1533,7 @@ export function createMeetingMinutesUI({
       if (!canCreate()) {
         save.disabled = true;
         renderList();
-        clear(detailPane);
-        detailPane.append(makeElement(doc, 'p', { className: 'bb-minutes-empty', textContent: '議事録を選ぶと、ここに本文が出ます。' }));
-        detailPane.append(makeElement(doc, 'p', {
-          className: 'bb-minutes-create-guard',
-          textContent: '会議を作成する権限がありません。作成はプロジェクトの編集権限がある人が行います。',
-        }));
+        renderCreateUnavailable();
         return;
       }
       save.disabled = true;
@@ -1403,6 +1647,7 @@ export function createMeetingMinutesUI({
     return state.detail;
   }
 
+  renderToolbar([]);
   renderDetail(null);
   void loadMeetings();
   return {

package/ui/outcome-knowledge.js

@@ -84,6 +84,9 @@ const SCOPE_LABELS = Object.freeze({
 
 const LIFECYCLE_STATUS_LABELS = Object.freeze({
   active: '有効',
+  decided: '決定済み',
+  active_reference: '参照用',
+  unknown: UNKNOWN,
   inactive: '無効',
   retired: '失効',
   superseded: '置換済み',
@@ -1480,7 +1483,8 @@ export function createKnowledgeOverviewController(options = {}) {
   const { root, api, onSelectProject } = options;
   if (!root || typeof root.replaceChildren !== 'function') throw new Error('knowledge_root_unavailable');
   const labels = resolveKnowledgeUiLabels(options.labels);
-  const itemsBase = optionalText(options.itemsPath).trim() || `/api/knowledge/${KNOWLEDGE_ROUTES.items}`;
+  // A host path may already carry conditions (for example `?limit=100`); keep them and add the filters.
+  const [itemsBase, itemsBaseQuery = ''] = (optionalText(options.itemsPath).trim() || `/api/knowledge/${KNOWLEDGE_ROUTES.items}`).split(/\?(.*)/s);
   const state = {
     filters: { q: '', scope: 'all', status: 'active' },
     list: { state: 'loading', records: null, absence_confirmed: false, searched_scope: null },
@@ -1491,7 +1495,7 @@ export function createKnowledgeOverviewController(options = {}) {
   const projectName = (code) => projectOptions(options.projects).find((option) => option.code === code)?.name ?? null;
 
   function itemsPath() {
-    const query = new URLSearchParams();
+    const query = new URLSearchParams(itemsBaseQuery);
     if (state.filters.q) query.set('q', state.filters.q);
     if (state.filters.scope) query.set('scope', state.filters.scope);
     if (state.filters.status) query.set('status', state.filters.status);

package/ui/people-and-companies-view.css

@@ -1,8 +1,9 @@
 /*
  * 「人と会社」. Load after workspace-kit.css and graph-view-shared.css.
  * Column templates of the people and company ledgers, the group titles,
- * the write buttons, the recorded company note and the relations in the
- * right rail, with a 760px variant.
+ * the add buttons, the recorded company note, and a record's page (the way
+ * back, its head, the actions gathered under it and its relations), with a
+ * 760px variant.
  * Uses only the shared tokens in brainbase-tokens.css.
  */
 .bb-pc-people,
@@ -67,25 +68,12 @@
   font-size: 12px;
 }
 
-.bb-graph-rail .bb-pc-fix {
-  display: grid;
-  gap: 6px;
-  margin: 16px 0 0;
-  color: var(--bb-color-muted);
-  font-size: 12px;
-}
-
-.bb-pc-actions,
 .bb-pc-relation-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
 
-.bb-pc-actions {
-  margin: 0 0 12px;
-}
-
 .bb-pc-company-cell {
   display: grid;
   gap: 2px;
@@ -102,6 +90,11 @@
 }
 
 @media (max-width: 760px) {
+  /* Below a host's top bar on a phone. */
+  .bb-pc-detail {
+    scroll-margin-top: 72px;
+  }
+
   .bb-pc-people-ledger .bb-ws-ledger-row {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px;
   }
@@ -262,3 +255,161 @@
   align-items: center;
   min-height: 46px;
 }
+
+/* A record's page (2026-10-16). Choosing a row turns the workspace into the
+   record's page, as a CRM does: the way back with the record's place, the
+   head, then what can be done to it, gathered in one place with what the page
+   says about it (nothing is deleted; why an action is disabled). */
+.bb-pc-action-group {
+  display: grid;
+  gap: 8px;
+  margin: 0 0 20px;
+}
+
+.bb-pc-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bb-pc-action-row .bb-ws-button.is-primary {
+  border-color: var(--bb-color-action);
+  background: var(--bb-color-action);
+  color: var(--bb-color-action-text);
+}
+
+.bb-pc-action-row .bb-ws-button.is-primary:hover:not(:disabled) {
+  border-color: var(--bb-color-action-hover);
+  background: var(--bb-color-action-hover);
+}
+
+.bb-pc-action-row .bb-ws-button[data-adds]::before {
+  content: '＋';
+}
+
+.bb-pc-action-note,
+.bb-pc-action-reason {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.bb-pc-action-reason {
+  justify-self: start;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: var(--bb-color-warning-soft);
+  color: var(--bb-color-warning);
+}
+
+.bb-pc-action-note a {
+  color: var(--bb-color-accent-strong);
+}
+
+.bb-pc-add {
+  margin-top: -4px;
+}
+
+.bb-pc-detail {
+  display: grid;
+  gap: 0;
+  scroll-margin-top: 16px;
+}
+
+.bb-pc-detail-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--bb-color-border);
+}
+
+.bb-pc-detail-nav .bb-pc-back {
+  margin-right: auto;
+}
+
+.bb-pc-detail-place {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: 4px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-pc-detail-nav .bb-ws-button[aria-label='前へ'],
+.bb-pc-detail-nav .bb-ws-button[aria-label='次へ'] {
+  min-width: 32px;
+  padding-inline: 8px;
+}
+
+.bb-pc-detail-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin: 0 0 18px;
+  scroll-margin-top: 16px;
+}
+
+.bb-pc-mark.bb-pc-detail-mark {
+  width: 44px;
+  height: 44px;
+  margin: 0;
+  font-size: 18px;
+}
+
+.bb-pc-company-mark.bb-pc-detail-mark {
+  border-radius: 10px;
+}
+
+.bb-pc-detail-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.bb-pc-detail-copy h2 {
+  margin: 0;
+  color: var(--bb-color-ink);
+  font-size: 22px;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+  scroll-margin-top: 16px;
+}
+
+.bb-pc-detail-copy h2:focus {
+  outline: none;
+}
+
+.bb-pc-detail-sub {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-pc-detail-lead {
+  margin: 4px 0 0;
+  color: var(--bb-color-ink);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.bb-pc-detail-actions {
+  padding: 14px 16px;
+  border: 1px solid var(--bb-color-border);
+  border-radius: 10px;
+  background: var(--bb-color-canvas);
+}
+
+.bb-pc-detail-block {
+  margin: 0 0 22px;
+}
+
+.bb-pc-detail-block h3 {
+  margin: 0 0 6px;
+  color: var(--bb-color-ink);
+  font-size: 13px;
+}