/* Project overview, program, records and shared side panels. Tokens from app.css only. */

/* Project overview */
.proj-head .inner { align-items: end; }
.proj-head .meta .stamp { margin-right: 2px; }
.proj-tabs { margin-bottom: 10px; overflow-y: hidden; }
#tab-insights .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#tab-insights .widget.w3, #tab-insights .widget.w4 { grid-column: span 2; }
.insights-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.pad { padding: 0 16px 12px; }

/* Program */
.program .ms-mark { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--ink); margin: 0 4px 1px 2px; }
.program tr[data-edit]:hover { background: var(--sheet-2); }
.program tr[data-edit]:focus-visible { outline-offset: -2px; }

/* Record lists: segmented quick filters */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--sheet); }
.seg-opt { position: relative; display: inline-flex; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--line); }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { padding: 0 14px; line-height: 32px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .18s var(--ease), color .18s var(--ease); }
.seg-opt:hover span { background: var(--sheet-2); color: var(--ink); }
.seg-opt input:checked + span { background: var(--accent-wash); color: var(--accent-ink); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.rec-title { font-weight: 600; }
.rec-sub { display: block; font-size: 12px; color: var(--ink-3); }
.grid .title-cell { max-width: 380px; }
.rec-parties { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.rec-parties .arrow { color: var(--ink-3); }
.rec-parties .who-line span:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* Record header and actions */
.rec-head .tb-title { margin: 4px 0 0; }
.rec-head .tb-cell .v .who-line { font-weight: 600; }
.status-pick select { width: auto; border-radius: 999px; height: 34px; font-weight: 600; padding: 0 30px 0 14px; }
.file-btn { cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Conversation (record thread) */
.convo { list-style: none; margin: 0; padding: 4px 0; }
.convo li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; }
.convo li + li { border-top: 1px solid var(--line-2); }
.convo li.here { background: var(--accent-wash); }
.convo .msg { min-width: 0; color: inherit; }
.convo .msg:hover { text-decoration: none; }
.convo .msg:hover .subj { text-decoration: underline; text-underline-offset: 3px; }
.convo .from, .convo .subj { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo .subj { font-size: 13px; color: var(--ink-2); }
.convo li.here .subj { color: var(--ink); font-weight: 600; }

/* Attachments */
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 16px; }
.att-list li + li { border-top: 1px solid var(--line-2); }
.att-list li > .icon { color: var(--ink-3); }
.att-list .t b, .att-list .t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-list .t small { color: var(--ink-2); font-size: 12px; }

/* Shared panels: comments and activity with avatars */
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.cform { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 6px 0; font-size: 13px; align-items: start; }
.act-list li + li { border-top: 1px solid var(--line-2); }
.act-list .avatar { margin-top: 1px; }
.act-list .when { color: var(--ink-3); font-size: 12px; }
.mini-list li > .icon { color: var(--ink-3); align-self: center; }
.mini-list li .avatar { align-self: center; }

@media (max-width: 900px) {
  .grid .col-opt { display: none; }
  #tab-insights .widgets { grid-template-columns: 1fr; }
  #tab-insights .widget.w2, #tab-insights .widget.w3, #tab-insights .widget.w4 { grid-column: auto; }
  .grid .title-cell { max-width: none; min-width: 170px; white-space: normal; }
  .rec-parties .who-line span:last-child { max-width: 90px; }
  .att-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .att-list li [data-open] { display: none; }
}

#rt .grid td.c-due .lbl { display: none; }
/* Phones: each record is a stacked row (number and status, full subject, due); tap opens it. */
@media (max-width: 640px) {
  #rt .table-wrap { overflow: visible; }
  #rt .grid thead { display: none; }
  #rt .grid, #rt .grid tbody { display: block; }
  #rt .grid tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); align-items: center; }
  #rt .grid td { display: none; padding: 0; border: 0; }
  #rt .grid td.c-number { display: block; grid-row: 1; grid-column: 1; }
  #rt .grid td.c-status { display: block; grid-row: 1; grid-column: 2; justify-self: end; }
  #rt .grid td.c-title { display: block; grid-row: 2; grid-column: 1 / -1; white-space: normal; max-width: none; overflow: visible; }
  #rt .grid td.c-due { display: block; grid-row: 3; grid-column: 1 / -1; font-size: 12px; }
  #rt .grid td.c-due .lbl { display: inline; }
  #rt .grid td.c-due .nolbl { display: none; }
}