/* HAND-WRITTEN, like _ours.css and _listing.css: no builder draws it. THE SHARE BOX, Recommend to a friend, setting S1
   of /design-2026/share-box/ (21 October 2026; the whole variant set is share-box/shb.css). Prefix shb-. The component
   is resources/js/components/design/share-box.tsx; config('design.extras') puts this sheet on every article, story,
   collection and listing, the one component those four kinds of page share.
   Icons alone, the sheet's G4 (Jack, 21 October 2026: "use the icons"): one line at 22 in a 44 square to press, the
   words kept for a screen reader; the copy link's tick takes its place while Copied. */
.shb{position:relative;display:block;margin:0;padding:0 0 var(--space);background:transparent;color:var(--ink)}
.shb.rnd-ground{padding:0 0 var(--space)} /* inside a round-up, feature or weekend: its ground's colour, never its padding */
.shb-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 48px;box-sizing:border-box;padding:36px 40px 38px;background:var(--oat)}
.shb.rnd-ground.oat .shb-box{background:var(--paper)}
/* an event's own matter ends on its map with no air under it (pages/events/show.tsx): the box brings its own */
.event>.shb{padding-top:calc(var(--space) / 2)}
.shb-head{min-width:0}
.shb-h{margin:0;font:400 28px/1.08 var(--face);letter-spacing:-.005em;color:inherit;text-wrap:balance}
.shb-ways{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 30px}
.shb-ways>li{margin:0;padding:0}
.shb-o-phone{display:none}
.shb-w{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85;transition:opacity .2s var(--ease)}
.shb-w:hover,.shb-w:focus-visible{opacity:1}
.shb-w:focus-visible{outline:2px solid var(--august);outline-offset:3px}
.shb-w{min-width:44px;justify-content:center}
/* each icon is 22 in its 44 square: the row stands out by the 11 either side, so the marks themselves meet the heading's
   edge and the panel's padding, as every block meets its column */
.shb .shb-ways{margin:0 -11px}
.shb-w svg{display:block;flex:0 0 auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.shb-w svg.shb-tick{display:none}
.shb .is-done svg{display:none}
.shb .is-done svg.shb-tick{display:block}
.shb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shb-l>span{grid-area:1/1}
.shb-done{visibility:hidden}
.shb .is-done .shb-l>span:first-child{visibility:hidden}
.shb .is-done .shb-done{visibility:visible}
.shb-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
@media (max-width:760px){
  .shb-box{flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:28px 24px 30px}
  .shb-h{font-size:26px}
}
@media (max-width:600px){
  .shb:not(.no-sheet) .shb-ways>li{display:none}
  .shb:not(.no-sheet) .shb-ways>li.shb-o-phone,.shb:not(.no-sheet) .shb-ways>li.shb-o-copy{display:block}
  .shb:not(.no-sheet) .shb-ways{gap:4px 28px}
  .shb.no-sheet .shb-ways{gap:0 22px}
}
@media (prefers-reduced-motion:reduce){.shb-w{transition:none}}