/* Lawyer brief (Build F, state/lanes/lawyerbrief-design.md). Existing tokens only.
   A: the composer tab (.brief-tab*, .brief-link*); B: the brief page (.brief-page, toolbar, the Letter sheet);
   C: the phone / email check (.brief-check, .brief-hit*); D: the send dialog (.brief-send*);
   E: the public page /brief/<token> (static/brief.html, .bp-*; loads tokens.css + this file only). */

/* ---- Shared ---------------------------------------------------------------------------------------------- */
.brief-pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  background: var(--bg-hover); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  white-space: nowrap; flex: none;
}
.brief-pill.is-active { color: var(--green); }
.brief-pill.is-opened { color: var(--link); }
.brief-pill[hidden] { display: none; }
.brief-linkbtn, .brief-textbtn {
  border: 0; background: none; padding: 0 var(--sp-2); font: inherit; cursor: pointer; white-space: nowrap;
}
.brief-linkbtn { color: var(--link); font-size: var(--fs-sm); }
.brief-linkbtn:hover { text-decoration: underline; }
.brief-textbtn { color: var(--text-2); font-size: var(--fs-md); height: var(--control-h); border-radius: var(--r-sm); padding: 0 var(--sp-4); }
.brief-textbtn:hover { background: var(--bg-hover); color: var(--text); }
.brief-linkbtn[hidden], .brief-textbtn[hidden], .brief-page .btn[hidden] { display: none; }
.brief-copy-tmp { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---- A. Composer tab -------------------------------------------------------------------------------------- */
.brief-tab { display: flex; flex-direction: column; animation: composer-open var(--t-med) var(--ease-enter); }
.brief-tab-body { display: flex; flex-direction: column; }
.brief-tab-body > .skeleton { padding: var(--sp-5) var(--sp-6); }
.brief-tab-line {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; min-height: 56px;
  padding: var(--sp-4) var(--sp-6);
}
.brief-tab-text { flex: 1 1 260px; min-width: 0; color: var(--text-2); }
.brief-tab-actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.brief-tab-meta { font-size: var(--fs-sm); color: var(--text-2); }
.brief-tab-error { color: var(--red); }
.brief-tab-reason { color: var(--text-2); font-size: var(--fs-sm); }
.brief-tab-link { color: var(--link); }

.brief-links { border-top: 1px solid var(--border); }
.brief-links-head {
  padding: var(--sp-3) var(--sp-6); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2);
}
.brief-link { border-top: 1px solid var(--border); }
.brief-link-line { display: flex; align-items: center; gap: var(--sp-4); min-height: 40px; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6); }
.brief-link-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.brief-link-to { color: var(--text); overflow-wrap: anywhere; }
.brief-link-meta { font-size: var(--fs-sm); color: var(--text-2); }
/* 'Manage' (the link's menu: Show activity, Copy link, Send again, Turn off link) reads as a button on every row. */
.brief-link-more { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); }
.brief-link-more svg { width: 16px; height: 16px; }
.brief-link-activity { padding: 0 var(--sp-6) var(--sp-3) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-1); }
.brief-link-activity[hidden] { display: none; }
.brief-link-event { font-size: var(--fs-sm); color: var(--text); }
.brief-link-event-at { color: var(--text-2); }
.brief-link-event.is-error { color: var(--red); }
.brief-link-menu .menu-item.is-danger, .brief-link-menu .menu-item.is-danger .menu-label { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .brief-tab { animation: none; } }

/* ---- B. Brief page ---------------------------------------------------------------------------------------- */
.brief-page { min-height: 100%; background: var(--bg-app); padding-bottom: var(--sp-9); }
.brief-toolbar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  min-height: 56px; padding: var(--sp-2) var(--sp-6); background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.brief-toolbar-spacer { flex: 1; }
.brief-back {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 360px;
  color: var(--text); font-weight: var(--fw-semibold); text-decoration: none;
}
.brief-back:hover { color: var(--link); }
.brief-back .ic, .brief-back svg { width: 16px; height: 16px; flex: none; }
.brief-back-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-save-state { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.brief-save-state[data-state="error"] { color: var(--red); }
.brief-save-state[hidden] { display: none; }

.brief-bar-row {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-6); background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.brief-bar-row[hidden] { display: none; }
.brief-bar-label { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.brief-bar-row .input { flex: 1 1 260px; min-width: 0; max-width: 560px; }

.brief-notice { padding: var(--sp-5) var(--sp-6) 0; }
.brief-notice[hidden] { display: none; }
.brief-notice-in {
  max-width: 816px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-note); color: var(--text);
}

.brief-sheet-wrap { padding: 0 var(--sp-6); }
.brief-sheet {
  max-width: 816px; margin: var(--sp-7) auto 0; background: var(--bg-surface); box-shadow: var(--shadow-raised);
  border-radius: var(--r-sm); overflow: hidden;
}
.brief-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); height: 64px;
  padding: 0 var(--sp-7); background: var(--nav-bg); color: var(--text-inverse);
}
.brief-logo { height: 31px; width: auto; max-width: 60%; }
.brief-band-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); white-space: nowrap; }
.brief-rule { height: 2px; background: var(--gold); }
.brief-sheet-body { padding: var(--sp-6) var(--sp-8) var(--sp-8); }
.brief-prepared { font-size: var(--fs-sm); color: var(--text-2); }
.brief-sec { margin-top: var(--sp-7); }
.brief-h { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); color: var(--text); }
.brief-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.brief-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 28px; align-items: start; gap: var(--sp-4); }
.brief-row.is-doc { grid-template-columns: 180px minmax(0, 1fr) auto 28px; }
.brief-cell {
  min-height: 28px; padding: 3px var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); border-radius: var(--r-sm);
  font-size: var(--fs-md); line-height: var(--lh-md); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
  outline: none; border: 1px solid transparent; cursor: text;
}
.brief-label { color: var(--text-2); }
.brief-cell:hover { background: var(--bg-hover); }
.brief-cell:focus { background: var(--bg-surface); border-color: var(--border-focus); }
.brief-cell.is-empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.brief-cell.is-flagged, .brief-block.is-flagged { border-color: var(--yellow-icon); box-shadow: 0 0 0 1px var(--yellow-icon); }
/* The row ✕: quiet but plain to see at rest (Hamid: "i didnt even see that x...its so small"): full --text-2, no
   fill, a 16px icon in a 28px button; hover adds the tile and the darker colour. */
.brief-row-remove {
  width: 28px; height: 28px; margin-top: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-tile); background: transparent; color: var(--text-2); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.brief-row-remove svg { width: 16px; height: 16px; }
.brief-row-remove:hover, .brief-row-remove:focus-visible { background: var(--bg-hover); color: var(--text); }
.brief-doc-tag {
  margin-top: 4px; height: 20px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); background: var(--bg-hover);
  color: var(--text-2); font: inherit; font-size: var(--fs-xs); white-space: nowrap; cursor: pointer;
}
.brief-doc-tag.is-on_file { color: var(--green); }
.brief-doc-tag:hover { background: var(--bg-selected); }
.brief-add {
  margin-top: var(--sp-3); border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm);
  color: var(--link); cursor: pointer;
}
.brief-add:hover:not(:disabled) { text-decoration: underline; }
.brief-add:disabled { color: var(--text-muted); cursor: default; }
.brief-empty { color: var(--text-muted); font-size: var(--fs-md); }
.brief-block {
  display: block; width: 100%; min-height: 72px; resize: none; overflow: hidden; box-sizing: border-box;
  padding: var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); width: calc(100% + 2 * var(--sp-2));
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; outline: none;
  font: inherit; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--text); white-space: pre-wrap;
}
.brief-block::placeholder { color: var(--text-muted); }
.brief-block:hover { background: var(--bg-hover); }
.brief-block:focus { background: var(--bg-surface); border-color: var(--border-focus); }
.brief-drafting { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.brief-drafting-text { color: var(--text-2); }

.brief-state {
  max-width: 816px; margin: var(--sp-8) auto 0; padding: var(--sp-7); background: var(--bg-surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-raised); display: flex; flex-direction: column; gap: var(--sp-5);
}
.brief-state-text { color: var(--text-2); }
.brief-state-text strong { color: var(--red); }
.brief-state-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.brief-sheet-msg { max-width: 816px; margin: var(--sp-8) auto 0; color: var(--red); }

.brief-confirm { padding: var(--sp-5); width: 280px; display: flex; flex-direction: column; gap: var(--sp-3); }
.brief-confirm-text { font-weight: var(--fw-semibold); color: var(--text); }
.brief-confirm-sub { font-size: var(--fs-sm); color: var(--text-2); }
.brief-confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); }

@media (max-width: 720px) {
  .brief-toolbar { padding: var(--sp-2) var(--sp-5); }
  .brief-sheet-wrap { padding: 0 var(--sp-4); }
  .brief-sheet-body { padding: var(--sp-5); }
  .brief-band { padding: 0 var(--sp-5); }
  .brief-row, .brief-row.is-doc { grid-template-columns: minmax(0, 1fr) 28px; }
  .brief-row .brief-value, .brief-row .brief-doc-tag { grid-column: 1; }
  .brief-row .brief-row-remove { grid-column: 2; grid-row: 1; }
}

/* ---- C. Phone / email check ------------------------------------------------------------------------------- */
.brief-check {
  max-width: 816px; margin: var(--sp-5) auto 0; padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-info);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.brief-page > .brief-check { margin: var(--sp-5) var(--sp-6) 0; }
@media (min-width: 880px) { .brief-page > .brief-check { margin: var(--sp-5) auto 0; } }
.brief-check[hidden] { display: none; }
.brief-check-removed { color: var(--text); }
.brief-check-head { font-weight: var(--fw-semibold); color: var(--text); }
.brief-check-head.is-done { font-weight: var(--fw-regular); color: var(--text-2); }
.brief-hits { display: flex; flex-direction: column; gap: var(--sp-2); }
.brief-hit { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; min-height: 36px; }
.brief-hit-text { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.brief-hit-where { color: var(--text-2); }
.brief-hit-quote strong { font-weight: var(--fw-semibold); }
.brief-hit-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brief-hit-kept { font-size: var(--fs-sm); color: var(--text-2); }
.brief-hit.is-kept .brief-hit-text { color: var(--text-2); }

/* ---- D. Send dialog --------------------------------------------------------------------------------------- */
.brief-send { display: flex; flex-direction: column; gap: var(--sp-5); }
.brief-send-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.brief-send-label { padding-top: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.brief-send-control { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.brief-send-control .input { width: 100%; }
.brief-send-from { padding-top: 8px; color: var(--text-2); overflow-wrap: anywhere; }
.brief-send-message { min-height: 120px; resize: vertical; font: inherit; }
.brief-send-hint { font-size: var(--fs-sm); color: var(--text-2); }
.brief-send-hint.is-muted { color: var(--text-muted); }
.brief-send-err { font-size: var(--fs-sm); color: var(--red); }
.brief-send-err:empty, .brief-send-err[hidden] { display: none; }
.brief-send-extra { display: flex; flex-direction: column; gap: var(--sp-3); }
.brief-send-attachment { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); font-size: var(--fs-sm); }
.brief-send-file-ic {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); background: var(--red); color: var(--text-inverse); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.brief-send-note { font-size: var(--fs-sm); color: var(--text-muted); }
.brief-send-local { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--bg-note); font-size: var(--fs-sm); color: var(--text); }
@media (max-width: 520px) { .brief-send-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } .brief-send-label, .brief-send-from { padding-top: 0; } }

/* ---- E. Public page /brief/<token> ------------------------------------------------------------------------ */
.bp-body { margin: 0; min-height: 100vh; background: var(--bg-app); font-family: var(--font); color: var(--text); font-size: var(--fs-md); line-height: var(--lh-md); }
.bp-page { box-sizing: border-box; width: 100%; padding: var(--sp-8) 16px; display: flex; flex-direction: column; align-items: center; }
.bp-card {
  box-sizing: border-box; width: 100%; max-width: 400px; background: var(--bg-surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-raised); overflow: hidden;
}
.bp-card.is-wide { max-width: 960px; }
.bp-band { display: flex; align-items: center; height: 56px; padding: 0 var(--sp-6); background: var(--nav-bg); }
.bp-band img { height: 26px; width: auto; max-width: 100%; }
.bp-rule { height: 2px; background: var(--gold); }
.bp-in { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.bp-title { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.bp-text { margin: 0; color: var(--text-2); }
.bp-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.bp-input {
  box-sizing: border-box; width: 100%; height: var(--control-h-lg); padding: 0 var(--sp-4); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); font: inherit; color: var(--text); background: var(--bg-surface);
}
.bp-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }
.bp-code { letter-spacing: .3em; font-size: var(--fs-lg); text-align: center; }
.bp-btn {
  box-sizing: border-box; height: var(--control-h-lg); padding: 0 var(--sp-6); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text); font: inherit; font-weight: var(--fw-semibold);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.bp-btn:hover { background: var(--bg-hover); }
.bp-btn.is-primary { background: var(--green); border-color: var(--green); color: var(--text-inverse); }
.bp-btn.is-primary:hover { background: var(--green-hover); }
.bp-btn:disabled { opacity: .6; cursor: default; }
.bp-row { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.bp-link { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.bp-sent-to { color: var(--text); overflow-wrap: anywhere; }
.bp-sent-to .bp-link { white-space: nowrap; }
.bp-msg { margin: 0; font-size: var(--fs-sm); color: var(--red); }
.bp-msg:empty { display: none; }
.bp-msg.is-info { color: var(--text-2); }
.bp-viewer { width: 100%; height: 75vh; min-height: 420px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); }
.bp-foot { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--text-muted); text-align: center; max-width: 400px; }

/* Fix round 3: the edited-after-send button, the old-link line and the read-only added lines in the send dialog. */
.brief-send-updated { color: var(--link); border-color: var(--link); flex: none; }
.brief-send-updated[hidden] { display: none; }
.brief-send-replaces {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); background: var(--bg-note); font-size: var(--fs-sm); color: var(--text);
}
.brief-send-replaces-text { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.brief-send-replaces-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.brief-send-added {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--border); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-sm);
  user-select: text; overflow-wrap: anywhere;
}
.brief-send-added-head { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; }
.brief-send-added-line { margin: 0; }
.brief-send-signature { color: var(--text-muted); }
.brief-send-signature p { margin: 0; }
.brief-send-signature img { max-width: 100%; height: auto; opacity: .75; }