/* Reader route/share composition styles.
 * Owner: reader share flow and ReaderShell-adjacent share banner.
 * This carrier owns reader-* only; browser mechanics stay in UIKernel-backed reader runtimes.
 */

/* ============================================================
 * reader-share-panel — U5 SharedReader generator
 * Composed from the canonical Modal primitive.
 * ============================================================ */

.reader-share-panel { display: flex; flex-direction: column; gap: var(--space-4); }

.reader-share-panel-sub {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
  margin: 0;
}

.reader-share-panel-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--type-body-family);
  font-size: var(--type-small-size);
  color: var(--color-text);
}

.reader-share-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.reader-share-panel-generate {
  padding: var(--space-3) var(--space-6);
  font-family: var(--type-button-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  letter-spacing: var(--type-button-tracking);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-orange);
  border: 0;
  border-radius: var(--radii-md);
  cursor: pointer;
}
.reader-share-panel-generate:disabled { background: var(--color-slate-light); cursor: not-allowed; }

.reader-share-panel-result {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.reader-share-panel-link-row {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}

.reader-share-panel-link {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-md);
  font-family: var(--type-mono-family);
  font-size: var(--type-mono-size);
  color: var(--color-text);
  background: var(--color-paper);
}

.reader-share-panel-copy {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--type-button-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
}
.reader-share-panel-copy:hover { border-color: var(--color-orange); color: var(--color-orange); }

.reader-share-panel-foot {
  margin: var(--space-3) 0 0;
  font-size: var(--type-small-size);
  color: var(--color-text-muted);
}

.reader-share-panel-error {
  padding: var(--space-3) var(--space-4);
  background: #FEE2E2;
  color: var(--color-red);
  border-radius: var(--radii-md);
  font-size: var(--type-small-size);
}

.reader-share-banner {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-7);
  background: linear-gradient(135deg, var(--color-navy-deep), #112545 80%);
  color: var(--color-text-inverse);
  border-radius: var(--radii-lg);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.reader-share-banner [data-primitive="eyebrow"] { color: var(--color-orange); }
.reader-share-banner-text {
  font-family: var(--type-body-family);
  font-size: var(--type-small-size);
  line-height: var(--type-body-line);
  color: #DCE3EE;
}