/* ═══════════════════════════════════════════════════════════
   CBASCO — اشتراک‌گذاری
   ───────────────────────────────────────────────────────────
   Two pieces:
     .cbn-share-pill  — one compact control in the article meta row
     .cbn-share       — the full panel at the end of the article

   The panel is a wrapping grid of fixed-width tiles rather than a fixed
   column count, so it settles into 4 columns on a phone and one clean row
   on a desktop without a single media query doing the layout work.
   ═══════════════════════════════════════════════════════════ */

/* ───── Compact pill (next to date / author) ───── */
.cbn-share-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .8rem;
	font: inherit;
	font-size: .78rem;
	font-weight: 600;
	color: var(--cb-text-2);
	background: var(--cb-badge-bg);
	border: 1px solid var(--cb-border);
	border-radius: 100px;
	cursor: pointer;
	transition: color var(--cb-tr-fast), border-color var(--cb-tr-fast), background var(--cb-tr-fast);
	-webkit-tap-highlight-color: transparent;
}
.cbn-share-pill:hover,
.cbn-share-pill:focus-visible {
	color: var(--cb-highlight);
	border-color: var(--cb-border-hover);
	background: rgba(100, 170, 210, .16);
}
.cbn-share-pill svg { flex-shrink: 0; opacity: .85; }

/* Newsletter / notice headers are centred and have no date row of their own,
   so the pill gets its own small centred line instead of sitting in a list. */
.cbn-single__meta--share {
	justify-content: center;
	margin-top: .9rem;
}
.cbn-notice-single__status-row .cbn-share-pill { margin-inline-start: .6rem; }

/* ───── Panel ───── */
.cbn-share {
	margin: 3rem 0 0;
	padding: 1.6rem 1.5rem 1.4rem;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-md);
}

/* Brief highlight when the desktop pill scrolls the reader down here. */
.cbn-share.is-flash {
	animation: cbn-share-flash 1.6s ease;
}
@keyframes cbn-share-flash {
	0%, 100% { border-color: var(--cb-border);       box-shadow: none; }
	25%      { border-color: var(--cb-steel);        box-shadow: 0 0 0 4px var(--cb-glow); }
}

.cbn-share__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.15rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--cb-text);
}
.cbn-share__title svg { color: var(--cb-steel); flex-shrink: 0; }

/* ───── Network tiles ─────
   Tiles are 74px wide and wrap. No grid-template-columns per breakpoint:
   the row simply fits as many as the container allows. */
.cbn-share__grid {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin-bottom: 1.4rem;
}

.cbn-share__btn {
	flex: 0 0 auto;
	width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	padding: .7rem .25rem .6rem;
	text-decoration: none;
	background: var(--cb-bg-3);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-sm);
	cursor: pointer;
	font: inherit;
	transition: transform var(--cb-tr-fast), border-color var(--cb-tr-fast), background var(--cb-tr-fast);
	-webkit-tap-highlight-color: transparent;
}
.cbn-share__btn:hover,
.cbn-share__btn:focus-visible {
	transform: translateY(-2px);
	border-color: var(--cb-border-hover);
	background: var(--cb-bg-4);
}
.cbn-share__btn:active { transform: translateY(0); }

/* The brand colour lives in --s, set inline per network. Kept as a tinted
   disc rather than a solid brand block so eight of them in a row still read
   as one calm group instead of a rainbow. */
.cbn-share__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--s, var(--cb-steel));
	background: color-mix(in srgb, var(--s, #6aaecc) 14%, transparent);
	transition: background var(--cb-tr-fast);
}
/* Fallback for browsers without color-mix() */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.cbn-share__ico { background: rgba(100, 170, 210, .12); }
}
.cbn-share__btn:hover .cbn-share__ico {
	background: color-mix(in srgb, var(--s, #6aaecc) 26%, transparent);
}

.cbn-share__lbl {
	font-size: .68rem;
	font-weight: 600;
	color: var(--cb-text-2);
	line-height: 1;
	white-space: nowrap;
}

/* ───── Short-link field ───── */
.cbn-share__copy-lbl {
	display: block;
	margin-bottom: .45rem;
	font-size: .73rem;
	font-weight: 600;
	color: var(--cb-muted);
}
.cbn-share__copy-row {
	display: flex;
	gap: .5rem;
	align-items: stretch;
}
.cbn-share__input {
	flex: 1;
	min-width: 0;              /* lets the field shrink inside the flex row */
	padding: .6rem .8rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8rem;
	color: var(--cb-text-2);
	background: var(--cb-bg);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-sm);
	text-overflow: ellipsis;
}
.cbn-share__input:focus {
	outline: none;
	border-color: var(--cb-steel-d);
	color: var(--cb-highlight);
}

.cbn-share__copy-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1rem;
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	color: var(--cb-bg);
	background: var(--cb-steel);
	border: 1px solid var(--cb-steel);
	border-radius: var(--cb-r-sm);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--cb-tr-fast), border-color var(--cb-tr-fast);
	-webkit-tap-highlight-color: transparent;
}
.cbn-share__copy-btn:hover { background: var(--cb-steel-l); border-color: var(--cb-steel-l); }
.cbn-share__copy-btn.is-done { background: #3fbf72; border-color: #3fbf72; }

/* ───── Phone ───── */
@media (max-width: 560px) {
	.cbn-share { padding: 1.3rem 1.1rem 1.2rem; margin-top: 2.2rem; }
	.cbn-share__grid { gap: .45rem; justify-content: space-between; }
	/* Four per row, filling the width evenly instead of leaving a ragged gap. */
	.cbn-share__btn { width: calc(25% - .35rem); padding: .65rem .15rem .55rem; }
	.cbn-share__ico { width: 32px; height: 32px; }
	.cbn-share__lbl { font-size: .64rem; }

	/* Stack the copy row — a 100px button beside a URL is too cramped. */
	.cbn-share__copy-row { flex-direction: column; }
	.cbn-share__copy-btn { justify-content: center; padding: .65rem; }
}

/* ───── Respect reduced-motion and forced-colours ───── */
@media (prefers-reduced-motion: reduce) {
	.cbn-share.is-flash { animation: none; }
	.cbn-share__btn, .cbn-share-pill, .cbn-share__ico { transition: none; }
	.cbn-share__btn:hover { transform: none; }
}