.share-main { max-width: 780px; margin: 0 auto; padding: 2rem 1rem 5rem; }
.share-panel { display: grid; gap: .8rem; }
/* An author `display:` beats the UA stylesheet's `[hidden]{display:none}` --
   the M8 `.dm-compose-banner` lesson, recurring in a new product. This rule
   is load-bearing, not hygiene: main.js routes host/reader modes purely by
   toggling `hidden` on these three panels, so without it every reader
   renders the composer AND an empty "YOUR LIVE SHARE" panel (inert copy/QR/
   save-note/end-share controls) stacked above the share it came to read.
   Found in review by a two-context drive; invisible to every unit gate,
   because nothing in a unit test can see a CSS cascade. */
.share-panel[hidden] { display: none; }
.quick-share { width: calc(100% - 48px); max-width: 1012px; margin: 20px auto 0; padding: 0 22px; }
.quick-share > details > summary { min-height: 44px; padding: 10px 0; cursor: pointer; line-height: 1.5; }
.quick-share > details > summary .chip { margin-left: .5rem; }
.quick-share > details > summary:focus-visible, .quick-share a:focus-visible, .quick-share button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.quick-share .share-panel { padding: 0 0 22px; }
.quick-share .share-panel h2 { margin: .8rem 0 0; }
.quick-share .share-panel h3, .quick-share .share-panel p { margin: 0; }
.quick-share .pair-actions { margin-top: 0; }
.quick-share .btn, .quick-share .share-check, .quick-share input[type="file"], .quick-share summary { min-height: 44px; }
.quick-share a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.quick-share input[type="file"]::file-selector-button { min-height: 44px; font: inherit; }
.quick-options > summary { padding: 10px 0; cursor: pointer; }
.quick-options > div { display: grid; gap: .8rem; }
@media (max-width: 560px) {
  .quick-share { width: calc(100% - 24px); padding: 0 16px; margin-top: 12px; }
  .quick-share > details > summary .chip { display: inline-block; }
}
.share-panel textarea, .share-panel input[type="text"], .share-panel input[type="file"] { width: 100%; box-sizing: border-box; }
.share-panel textarea, .share-panel input[type="text"] { background: #0b0e14; color: #e8edf5; border: 1px solid #303846; border-radius: 6px; padding: .75rem; font: inherit; }
.share-copy, .share-warning, .share-note { line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.share-warning { color: #f1c76d; }
.share-link-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.share-check { display: flex; align-items: center; gap: .55rem; }
.share-list { display: grid; gap: .55rem; }
.share-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; padding: .75rem; border: 1px solid #303846; border-radius: 7px; }
.share-item-name { overflow-wrap: anywhere; }
.share-item-meta { color: #8f9bad; font-size: .9rem; }
.share-risk { color: #ffb86c; }
.share-item-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.share-qr { margin-top: .7rem; padding: .6rem; width: fit-content; background: #fff; border-radius: 6px; }
.share-qr svg { display: block; max-width: min(100%, 360px); height: auto; }
@media (max-width: 560px) { .share-link-row, .share-item { grid-template-columns: 1fr; } }
/* Touch targets (mobile Phase 0). The native "relay only" checkbox was ~13px
   and the file picker's UA button was a small tap area. Enlarge both on a
   coarse pointer only; the .btn 44px floor is in app.css, which /s also loads.
   Desktop is untouched. */
@media (pointer: coarse) {
  .share-check { min-height: 44px; }
  .share-check input[type="checkbox"] {
    flex: 0 0 22px;
    min-width: 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--amber);
  }
  .share-panel input[type="file"] { min-height: 44px; }
  /* Stack the link row (input · copy · share) full-width on touch -- bigger
     targets, and it makes room for the share button when navigator.share is
     present. Desktop keeps the inline 1fr auto row (share button stays hidden). */
  .share-link-row { grid-template-columns: 1fr; }
  /* Theme the native picker's button to match .btn (app.css, which /s loads)
     so it isn't an off-brand UA control at a small tap size. Coarse-scoped, so
     the desktop file control is unchanged. */
  .share-panel input[type="file"]::file-selector-button {
    font: inherit;
    color: var(--ink);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 16px;
    margin-right: 12px;
    min-height: 44px;
    cursor: pointer;
  }
}