/* Hallmark · component: result sharing · genre: editorial · theme: Almanac
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H4 E3 S5 R4 V4 · browser visual verification unavailable */
.share-heading { font-size: 32px; overflow-wrap: anywhere; min-width: 0; }
.share-intro { margin-bottom: var(--space-md); }
.share-preview { margin: 0 0 var(--space-md); padding: var(--space-lg); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-md); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; }
.share-wordmark { font: 700 36px/1 var(--font-display); margin-bottom: var(--space-sm); }
.share-meta { color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.share-score { font-size: 36px; font-weight: 600; line-height: 1.2; margin-top: var(--space-sm); font-variant-numeric: tabular-nums; }
.share-grid { display: grid; gap: 4px; }
.share-grid-row { display: flex; gap: 4px; }
.share-cell { width: 16px; height: 16px; border-radius: 2px; }
.share-cell.correct { background: var(--color-correct); }
.share-cell.present { background: var(--color-present); }
.share-cell.absent { background: var(--color-absent); }
.share-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
.share-platform, .share-tool { min-height: 44px; padding: var(--space-sm); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-paper); font-size: 13px; font-weight: 500; }
.share-platform[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.share-hint { font-size: 13px; line-height: 1.5; color: var(--color-muted); margin: 0 0 var(--space-md); }
.share-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.share-tool:disabled { opacity: .5; cursor: not-allowed; }
.share-tool[data-state="loading"] { cursor: progress; }
.share-tool[data-state="error"] { border-color: var(--color-error); }
.share-tool[data-state="success"] { border-color: var(--color-accent); color: var(--color-accent); }
.share-open { text-decoration: none; margin-top: var(--space-md); }
.share-open:focus-visible { outline: 2px solid var(--color-focus-outer); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-focus-inner); }
.share-open:active { transform: translateY(1px); }
.share-native { margin-top: var(--space-sm); width: 100%; }
.share-status { min-height: 20px; margin: var(--space-sm) 0 0; font-size: 13px; line-height: 1.5; color: var(--color-accent); }
.share-status[data-state="error"] { color: var(--color-error); }
.share-note { font-size: 12px; line-height: 1.5; color: var(--color-muted); margin: var(--space-sm) 0; }
.share-back { width: 100%; margin-top: var(--space-sm); }
.share-manual { display: block; margin-top: var(--space-md); }
.share-manual[hidden] { display: none; }
.share-manual textarea { margin-top: var(--space-sm); }
@media (hover: hover) { .share-platform:hover, .share-tool:not(:disabled):hover, .share-tool.is-hover { background: var(--color-key); color: var(--color-ink); } }
.share-tool.is-focus { outline: 2px solid var(--color-focus-outer); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-focus-inner); }
.share-tool.is-active { transform: translateY(1px); }
@media (max-width: 350px) { .share-preview { padding: var(--space-md); gap: var(--space-sm); } .share-wordmark { font-size: 30px; } .share-cell { width: 14px; height: 14px; } .share-platform, .share-tool { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .share-open:active, .share-tool.is-active { transform: none; } }