/* ============================================================================
 * LBIC Shared Trade Project — presentation-only delta (SP-PRESENTATION-01)
 * ----------------------------------------------------------------------------
 * PRESENTATION ONLY. Styles the ALREADY-INSTALLED v10 panel so it visually
 * belongs inside the retained Member Dashboard (0.3.6). It changes NOTHING
 * about behaviour: no markup, no selectors the binder (assets/lbic-sp.js)
 * depends on, no engine/schema/REST/page-88 shortcodes/dashboard.
 *
 * Target markup: the installed renderer (lbic-shared-project-render.php,
 * e1ea0832) emits  .lbic-sp-mount  →  .lbic-sp-panel  with .lbic-sp-* classes.
 *
 * Tokens: reuses the dashboard's accepted design tokens when present
 * (--dash-*), falling back to their exact accepted values so the panel is
 * correct whether or not it inherits the dashboard's variable scope (it is
 * appended as a sibling of the dashboard on page 88, so it usually does not).
 * ========================================================================== */

.lbic-sp-mount{
  --sp-navy: var(--dash-navy,#012a58);
  --sp-red:  var(--dash-red,#e60007);
  --sp-blue: var(--dash-blue,#7ec1f9);
  --sp-ink:  var(--dash-ink,#253b53);
  --sp-muted:var(--dash-muted,#4e6274);
  --sp-line: var(--dash-line,#c3d5e2);
  --sp-ice:  var(--dash-ice,#eff7fb);

  font: 400 16px/1.6 Manrope, system-ui, sans-serif;
  color: var(--sp-ink);
  text-align: left;
  max-width: 1180px;          /* match the dashboard .dash-frame */
  margin: 24px auto 0;
  padding-inline: 16px;
  box-sizing: border-box;
}
.lbic-sp-mount *{ box-sizing: border-box; }

.lbic-sp-loading{ color: var(--sp-muted); font-size: 14px; padding: 12px 0; }

/* One restrained card — no giant cards, no redesign. */
.lbic-sp-panel{
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: #fff;
  padding: 20px;
}

/* Headings — Newsreader, navy. No CSS capitalization transform: the renderer copy
   is shown exactly as authored (P01a). */
.lbic-sp-panel h3,
.lbic-sp-panel h4{
  font-family: Newsreader, Georgia, serif;
  color: var(--sp-navy);
  font-weight: 600;
  line-height: 1.25;
  margin: 22px 0 10px;
}
.lbic-sp-panel h3{ font-size: 1.125rem; }
.lbic-sp-panel h4{ font-size: 1rem; margin: 14px 0 8px; }

.lbic-sp-head{
  font-size: 14px; color: var(--sp-muted);
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--sp-line);
}
.lbic-sp-head strong{ color: var(--sp-navy); }
/* .lbic-sp-role: no capitalization transform — the role string is shown as the renderer emits it. */

/* Live status line (aria-live) — only shows a chrome when it has a message. */
.lbic-sp-status:not(:empty){
  border: 1px solid var(--sp-line);
  border-left: 3px solid var(--sp-blue);
  background: #f5fafe;
  border-radius: 7px;
  padding: 12px 14px; margin: 14px 0;
  font-size: 15px;
}

/* Section blocks share a subtle top rule so they read as one panel. */
.lbic-sp-invites,
.lbic-sp-documents,
.lbic-sp-activity,
.lbic-sp-owner-actions,
.lbic-sp-tasks,
.lbic-sp-tasks-unavailable{
  padding-top: 8px; margin-top: 8px;
  border-top: 1px solid var(--sp-line);
}
.lbic-sp-panel > .lbic-sp-head + *,
.lbic-sp-panel > .lbic-sp-status + *{ border-top: 0; margin-top: 0; }

.lbic-sp-panel ul,
.lbic-sp-panel ol{ list-style: none; padding: 0; margin: 0; }

/* Rows: invitations, documents, activity, tasks */
.lbic-sp-invites li,
.lbic-sp-doc,
.lbic-sp-event,
.lbic-sp-task{
  padding: 12px 0;
  border-top: 1px solid var(--sp-line);
}
.lbic-sp-invites li:first-child,
.lbic-sp-doc:first-child,
.lbic-sp-event:first-child,
.lbic-sp-task:first-child{ border-top: 0; }

.lbic-sp-doc{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lbic-sp-title{ font-weight: 600; color: var(--sp-navy); }
.lbic-sp-rev,
.lbic-sp-norev{ font-size: 14px; color: var(--sp-muted); }
.lbic-sp-state{
  display: inline-block; font-size: 13px; font-weight: 600;
  padding: 3px 8px; border: 1px solid #bad1e4; border-radius: 5px;
  background: var(--sp-ice); color: #245074;
}
.lbic-sp-aud{ font-size: 13px; color: var(--sp-muted); }

/* Inline forms inside a document row drop to their own line. */
.lbic-sp-doc form{ flex-basis: 100%; }

.lbic-sp-event{ font-size: 15px; }
.lbic-sp-event time{ font-size: 13px; color: var(--sp-muted); }
.lbic-sp-actor{ font-weight: 600; color: var(--sp-navy); }
.lbic-sp-event .lbic-sp-aud{ display: block; margin-top: 3px; }

/* Forms: compact, labelled, wrap cleanly. */
.lbic-sp-doc form,
.lbic-sp-newdoc,
.lbic-sp-owner-actions form{
  display: flex; flex-wrap: wrap; align-items: end;
  gap: 8px 12px; margin-top: 8px;
}
.lbic-sp-owner-actions form{
  padding: 12px 0; margin-top: 0;
  border-top: 1px solid var(--sp-line);
}
.lbic-sp-owner-actions form:first-of-type{ border-top: 0; }
.lbic-sp-newdoc{ padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--sp-line); }

.lbic-sp-panel label{
  display: inline-flex; flex-direction: column; gap: 4px;
  font-size: 14px; font-weight: 600; color: var(--sp-muted);
}

/* Controls — 16px, 44px min target, matching the dashboard selects. */
.lbic-sp-panel input[type="text"],
.lbic-sp-panel input[type="file"],
.lbic-sp-panel select{
  font: 400 16px/1.4 Manrope, system-ui, sans-serif;
  min-height: 44px; max-width: 100%;
  padding: 8px 12px;
  border: 1px solid #7a93a8; border-radius: 6px;
  color: var(--sp-ink); background: #fff;
}
.lbic-sp-panel select{ padding-right: 32px; }

/* Buttons — primary navy; secondary (non-committing/undo/download) outlined. */
.lbic-sp-act{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%;
  font: 700 15px/1.4 Manrope, system-ui, sans-serif;
  padding: 9px 16px;
  border: 1px solid var(--sp-navy); border-radius: 7px;
  background: var(--sp-navy); color: #fff;
  cursor: pointer; text-decoration: none; white-space: normal;
}
.lbic-sp-act:hover{ background: #063e78; color: #fff; }
.lbic-sp-act[data-action="download"],
.lbic-sp-act[data-action="revoke-grant"],
.lbic-sp-act[data-action="remove-participant"],
.lbic-sp-act[data-action="revoke-invitation"]{ background: #fff; color: var(--sp-navy); }
.lbic-sp-act[data-action="download"]:hover,
.lbic-sp-act[data-action="revoke-grant"]:hover,
.lbic-sp-act[data-action="remove-participant"]:hover,
.lbic-sp-act[data-action="revoke-invitation"]:hover{ background: var(--sp-ice); color: var(--sp-navy); }

.lbic-sp-empty,
.lbic-sp-norev{ color: var(--sp-muted); font-size: 14px; }
.lbic-sp-tasks-unavailable{ color: var(--sp-muted); font-size: 14px; }

.lbic-sp-panel :is(a,button,select,input,summary):focus-visible{
  outline: 3px solid #0a58ca; outline-offset: 2px;
}

/* Responsive — controls go full width on small screens; nothing overflows. */
@media (max-width: 39.99rem){
  .lbic-sp-doc form,
  .lbic-sp-newdoc,
  .lbic-sp-owner-actions form{ flex-direction: column; align-items: stretch; }
  .lbic-sp-panel label{ width: 100%; }
  .lbic-sp-panel input[type="text"],
  .lbic-sp-panel select{ width: 100%; }
  .lbic-sp-act{ width: 100%; }
}
@media (min-width: 40rem){ .lbic-sp-mount{ padding-inline: 24px; } }
@media (min-width: 64rem){ .lbic-sp-mount{ padding-inline: 32px; } }

/* Keep download feedback beside its file and long names within the card. */
.lbic-sp-mount .lbic-sp-file-status,
.lbic-sp-mount .lbic-sp-draft-note{
  display: block;
  flex-basis: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.6;
}
.lbic-sp-mount .lbic-sp-file-status:not(:empty){ margin: 4px 0 8px; }
.lbic-sp-mount .lbic-sp-file-status.lbic-sp-error{ color: #9b1c20; }
.lbic-sp-mount .lbic-sp-draft-note{
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--sp-blue);
  background: var(--sp-ice);
}