/*
 * OberBuilt Analysis Engine — Share surface styles (Phase 5 Plan 03).
 *
 * Covers three surfaces:
 *   1. Public share view at /share/{token} (Surface I)
 *   2. Inline share panel on the verdict page (Surface J)
 *   3. WC My Account → Shared Verdicts tab (Surface K)
 *   4. Revoked / expired / not-found card (D-11)
 *
 * All colors / spacing / typography come from tokens.css — no hardcoded hex.
 * Mirrors oae-pdf.css structural style (Plan 05-02).
 */

/* ===== Surface I — Public share view ===== */
.oae-share-view {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--oae-spacing-lg, 2rem) var(--oae-spacing-md, 1rem);
}
.oae-share-view__tagline {
  font: var(--oae-font-mono, monospace);
  font-size: var(--oae-text-small, 13px);
  color: var(--oae-fg-2, #8aa1bd);
  margin: 0 0 var(--oae-spacing-md, 1rem);
}
.oae-share-view__footer {
  font: var(--oae-font-mono, monospace);
  font-size: var(--oae-text-small, 13px);
  color: var(--oae-fg-3, #6b7e96);
  margin-top: var(--oae-spacing-lg, 2rem);
  padding-top: var(--oae-spacing-md, 1rem);
  border-top: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
}

/* ===== Surface I revoked / expired card ===== */
.oae-share-410 {
  background: var(--oae-color-bg, #0d1620);
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--oae-font-body, system-ui, sans-serif);
}
.oae-share-revoked {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--oae-spacing-lg, 2rem) var(--oae-spacing-md, 1rem);
}
.oae-share-revoked__card {
  background: var(--oae-color-surface, #142231);
  border-radius: var(--oae-radius-md, 8px);
  padding: var(--oae-spacing-xl, 2.5rem) var(--oae-spacing-lg, 2rem);
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.oae-share-revoked__logo {
  display: block;
  margin: 0 auto var(--oae-spacing-md, 1rem);
}
.oae-share-revoked__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--oae-fg-1, #e8eef6);
  margin: 0 0 var(--oae-spacing-sm, 0.5rem);
}
.oae-share-revoked__body {
  font-size: 16px;
  color: var(--oae-fg-2, #8aa1bd);
  margin: 0 0 var(--oae-spacing-md, 1rem);
  line-height: 1.5;
}
.oae-share-revoked__cta {
  margin: 0;
}
.oae-share-revoked__link {
  color: var(--oae-color-primary, #4f9fff);
  text-decoration: none;
  font-weight: 600;
}
.oae-share-revoked__link:hover,
.oae-share-revoked__link:focus {
  text-decoration: underline;
}

/* ===== Surface J — Inline share panel ===== */
.oae-share-panel {
  background: var(--oae-color-surface, #142231);
  border-top: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
  padding: var(--oae-spacing-lg, 2rem);
  margin: var(--oae-spacing-md, 1rem) 0;
}
.oae-share-panel__header {
  margin: 0 0 var(--oae-spacing-md, 1rem);
}
.oae-share-panel__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--oae-fg-1, #e8eef6);
  margin: 0;
}
.oae-share-panel__disclosure {
  background: var(--oae-color-neutral-bg, rgba(138, 161, 189, 0.08));
  border-left: 4px solid var(--oae-color-neutral, #8aa1bd);
  padding: var(--oae-spacing-md, 1rem);
  font-size: 13px;
  color: var(--oae-fg-2, #8aa1bd);
  margin: 0 0 var(--oae-spacing-md, 1rem);
  border-radius: var(--oae-radius-sm, 4px);
}
.oae-share-panel__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oae-spacing-sm, 0.5rem);
  align-items: center;
  margin: 0 0 var(--oae-spacing-md, 1rem);
}
.oae-share-panel__label {
  font-size: 13px;
  color: var(--oae-fg-2, #8aa1bd);
}
.oae-share-panel__select {
  background: var(--oae-color-bg, #0d1620);
  color: var(--oae-fg-1, #e8eef6);
  border: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--oae-radius-sm, 4px);
  padding: 0.25rem 0.5rem;
  font-size: 14px;
}
.oae-share-panel__status {
  margin: 0;
  font-size: 13px;
  color: var(--oae-fg-2, #8aa1bd);
  min-height: 1.2em;
}
.oae-share-panel__status[data-state="error"] {
  color: var(--oae-color-danger, #ff5a5a);
}
.oae-share-panel__status[data-state="success"] {
  color: var(--oae-color-ok, #2bd57a);
}

.oae-share-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.oae-share-panel__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oae-spacing-sm, 0.5rem);
  padding: var(--oae-spacing-sm, 0.5rem) 0;
  border-bottom: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
  font-size: 14px;
}
.oae-share-panel__empty {
  padding: var(--oae-spacing-sm, 0.5rem) 0;
  color: var(--oae-fg-3, #6b7e96);
  font-size: 13px;
}
.oae-share-panel__token {
  font-family: var(--oae-font-mono, monospace);
  color: var(--oae-fg-2, #8aa1bd);
}
.oae-share-panel__expiry,
.oae-share-panel__views {
  font-size: 13px;
  color: var(--oae-fg-3, #6b7e96);
}

/* ===== Surface K — My Account Shares tab ===== */
.oae-shares {
  margin: 0;
}
.oae-shares__header {
  margin: 0 0 var(--oae-spacing-md, 1rem);
}
.oae-shares__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--oae-fg-1, #e8eef6);
  margin: 0 0 var(--oae-spacing-xs, 0.25rem);
}
.oae-shares__sub {
  font-size: 14px;
  color: var(--oae-fg-2, #8aa1bd);
  margin: 0;
}
.oae-shares__empty {
  background: var(--oae-color-surface, #142231);
  border-radius: var(--oae-radius-md, 8px);
  padding: var(--oae-spacing-xl, 2.5rem);
  text-align: center;
}
.oae-shares__empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--oae-fg-1, #e8eef6);
  margin: 0 0 var(--oae-spacing-sm, 0.5rem);
}
.oae-shares__empty-body {
  font-size: 16px;
  color: var(--oae-fg-2, #8aa1bd);
  margin: 0;
}
.oae-shares__table-wrap {
  overflow-x: auto;
}
.oae-shares__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--oae-color-surface, #142231);
  border-radius: var(--oae-radius-md, 8px);
}
.oae-shares__th {
  text-align: left;
  padding: var(--oae-spacing-sm, 0.5rem) var(--oae-spacing-md, 1rem);
  font-size: 13px;
  font-weight: 600;
  color: var(--oae-fg-2, #8aa1bd);
  border-bottom: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
}
.oae-shares__td {
  padding: var(--oae-spacing-sm, 0.5rem) var(--oae-spacing-md, 1rem);
  font-size: 14px;
  color: var(--oae-fg-1, #e8eef6);
  border-bottom: 1px solid var(--oae-color-border, rgba(255, 255, 255, 0.08));
  vertical-align: top;
  min-height: 44px; /* UI-SPEC accessibility touch target */
}
.oae-shares__token-short {
  font-family: var(--oae-font-mono, monospace);
  font-size: 12px;
  color: var(--oae-fg-3, #6b7e96);
}
.oae-shares__pagination {
  margin-top: var(--oae-spacing-md, 1rem);
  font-size: 14px;
}

/* Focus visibility (UI-03) */
.oae-share-generate:focus-visible,
.oae-shares__copy:focus-visible,
.oae-shares__revoke:focus-visible,
.oae-share-copy:focus-visible,
.oae-share-revoke:focus-visible {
  outline: 2px solid var(--oae-color-primary, #4f9fff);
  outline-offset: 2px;
}

/* Disabled cap state */
.oae-share-generate[aria-disabled="true"],
.oae-share-generate[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   Share-panel button styling — primary (Generate) + ghost (Copy/Revoke).

   These buttons carry the markup hint classes .oae-btn / .oae-btn--primary /
   .oae-btn--ghost (see views/verdict-share-panel.php), but no global .oae-btn
   rule exists in the plugin's frontend CSS. Without scoped rules, the
   .oae-shell button reset (specificity 0,1,1) wipes their padding, background,
   and border, leaving plain text. Scoping under .oae-share-panel raises
   specificity to (0,2,0) — matching the commit 2875704 pattern used for
   .oae-upload .oae-upload__btn.
   ───────────────────────────────────────────────────────────────────── */
.oae-share-panel .oae-share-generate,
.oae-share-panel .oae-share-copy,
.oae-share-panel .oae-share-revoke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oae-touch-target, 44px);
  padding: var(--oae-spacing-sm, 8px) var(--oae-spacing-lg, 16px);
  border: 1px solid transparent;
  border-radius: var(--oae-radius, 6px);
  font-family: var(--oae-font-heading, inherit);
  font-size: var(--oae-text-body, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.oae-share-panel .oae-share-generate {
  background: var(--oae-color-primary, #4f9fff);
  color: var(--oae-fg-on-primary, #0d1620);
}
.oae-share-panel .oae-share-generate:hover {
  background: color-mix(in oklab, var(--oae-color-primary, #4f9fff) 88%, black);
}
.oae-share-panel .oae-share-copy,
.oae-share-panel .oae-share-revoke {
  background: transparent;
  color: var(--oae-fg-1, #e8eef6);
  border-color: var(--oae-color-border, rgba(255, 255, 255, 0.16));
}
.oae-share-panel .oae-share-copy:hover,
.oae-share-panel .oae-share-revoke:hover {
  background: var(--oae-color-bg, #0d1620);
  border-color: var(--oae-color-border-strong, rgba(255, 255, 255, 0.28));
}