/* ==================================================================
   The share row under an article (inc/share.php).

   It is a section in the page like the replies and the Letter below it, so it opens
   on the same 2px rule with var(--flow) either side: the rule stands var(--flow) under
   whatever closes the piece, and var(--flow) over the label's capitals. It keeps
   nothing at its foot. The replies or the Letter that follow open on their own rule
   var(--flow) under the foot of the marks' ink, which is the divider below, so there is
   never a second rule beside theirs. Where nothing follows, for a reader who saw only
   the opening, the module's own var(--flow) runs to the rule of the next band.
   ================================================================== */
.body > .idz-share{margin-top:var(--flow);padding-top:var(--flow);border-top:2px solid var(--rule-ink)}
/* Two classes, so these outrank .body > * + * and the rhythm stays the section rule's
   whatever comes before or after it. */
.body > * + .idz-share,
.body > .idz-share + *{margin-top:var(--flow)}

/* The label and, beside it, the word that says the link was copied. */
.idz-share-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s5)}
/* Two classes: .body h2 outranks one, and would set this in the display face at 30px.
   The same label as the replies' heading below it. Its capitals are the top of the row,
   so the rule over it is var(--flow) from the letters, not from the line box. */
.idz-share .idz-share-h,.idz-share .idz-share-status{font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.4;margin:0;
  font-variation-settings:normal;text-box:trim-both cap alphabetic}
/* The label holds its line; the note beside it may wrap on the narrowest phone. */
.idz-share .idz-share-h{color:var(--ink-soft);text-wrap:nowrap}
.idz-share .idz-share-status{color:var(--accent);text-align:right}

/* The marks. .body's list and link rules outrank one class, so these carry two.
   Each item is exactly its mark's ink (inc/share.php crops every mark to its drawing),
   so space-between puts the first mark's ink one step in from the column's left edge,
   the last one's the same step in from its right edge, and the same gap between every
   pair. The step in is the owner's: edge to edge, the row read as wider than the text. */
.idz-share .idz-share-list{list-style:none;margin:0;padding:0 var(--s4);display:flex;align-items:center;
  justify-content:space-between}
.idz-share .idz-share-list > li{margin:0;display:block}
.idz-share .idz-share-list > li[hidden]{display:none}
/* No box: the mark alone, in the grey the site's other small controls rest in, so the
   row of marks sits under the piece without competing with it. A button is reset as
   well as a link, since the browser gives a button its own border, fill and padding. */
.idz-share .idz-share-btn{position:relative;display:block;margin:0;padding:0;
  color:var(--ink-soft);background:none;border:0;border-radius:0;box-shadow:none;
  font:inherit;line-height:0;text-decoration:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:color .2s ease}
/* The place a finger can press: 44px square, the smallest comfortable target, centred on
   the mark. It is laid over the page and takes no room, so the row is spaced by the
   marks while each is still easy to hit. */
.idz-share .idz-share-btn::before{content:"";position:absolute;left:50%;top:50%;
  width:max(44px,100%);height:max(44px,100%);transform:translate(-50%,-50%)}
/* A mark darkens from the grey to full ink, the same step every quiet control on the
   site takes. It drew the oxblood before, which is now kept for focus. The mark has no
   hairline under it, so there is nothing for a press to thicken. */
.idz-share .idz-share-btn:hover{color:var(--ink)}
/* The keyboard's ring is drawn round the whole place to press, not the mark alone,
   and the ink under it is the pointer's. */
.idz-share .idz-share-btn:focus{outline:none}
.idz-share .idz-share-btn:focus-visible{color:var(--ink)}
.idz-share .idz-share-btn:focus-visible::before{outline:2px solid var(--accent);outline-offset:-2px}
.idz-share .idz-share-btn svg{display:block}

/* On a phone eleven marks in one line would put the places to press on top of each
   other, so they stand in two rows of six columns: the first row runs edge to edge
   and the second sits under its columns. Each column is as wide as the first row's
   mark in it, so that row is spaced exactly as the single row is. A second row's item
   takes no width and its mark stands out of it, centred under the column, or held to
   the column's left edge in the first column. The rows are a block apart so the two
   rows' places to press do not meet. */
@media(max-width:560px){
  .idz-share .idz-share-list{display:grid;grid-template-columns:repeat(6,auto);
    justify-content:space-between;align-items:center;row-gap:var(--s6)}
  .idz-share .idz-share-list > li:nth-child(n+7 of :not([hidden])){display:flex;
    justify-content:center;justify-self:center;width:0}
  .idz-share .idz-share-list > li > .idz-share-btn{flex:none}
  .idz-share .idz-share-list > li:nth-child(6n+1 of :not([hidden])){justify-content:flex-start;justify-self:start}
}

/* The address, for copying by hand where the browser would not copy it. */
.idz-share .idz-share-manual{margin-top:var(--s3)}
.idz-share .idz-share-manual[hidden]{display:none}
.idz-share .idz-share-manual input{display:block;width:100%;font-family:var(--sans);font-size:13.5px;
  padding:var(--s2);background:var(--paper);color:var(--ink);border:1px solid var(--rule-ink);border-radius:0}
.idz-share .idz-share-manual input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media(prefers-reduced-motion:reduce){.idz-share .idz-share-btn{transition:none}}
@media print{.idz-share{display:none}}