/* Sayings page.
   Each line is its own row on purpose: it gives the eye somewhere to stop, makes a line easy
   to select on a phone, and gives the share button somewhere to live. */
.bgws{max-width:820px;margin:0 auto}
.bgws-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 38px;padding-bottom:20px;border-bottom:1px solid var(--line,rgba(147,138,126,.24))}
.bgws-nav a{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;
	color:var(--muted,#938a7e);text-decoration:none;border:1px solid var(--line,rgba(147,138,126,.3));
	border-radius:6px;padding:7px 13px;transition:color .18s,border-color .18s}
.bgws-nav a:hover{color:var(--accent,#9b2f2c);border-color:var(--accent,#9b2f2c)}
.bgws-cat{margin:0 0 46px}
.bgws-h{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(22px,3.4vw,30px);
	line-height:1.15;color:var(--text,#ece5d8);margin:0}
.bgws-blurb{font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--muted,#938a7e);
	margin:6px 0 14px;line-height:1.6}
.bgws-list{list-style:none;margin:0;padding:0}
/* A tight list, not a stack of paragraphs. The dividers are gone too: with 60 lines in a
   category a rule under every one turns the page into a spreadsheet. */
.bgws-line{display:flex;align-items:flex-start;gap:10px;padding:3px 0;border-bottom:0}

/* .bgwr-text p{margin:0 0 1.4em} from the reader outranks a bare .bgws-t, and these lines
   live inside .bgwr-text so the share tool can see them. That 1.4em was adding 18px under
   every saying, which is the gap Bill kept pointing at. Match the specificity. */
.bgwr-text .bgws-t,
.bgws-t{flex:1 1 auto;margin:0;font-family:'Fraunces',Georgia,serif;font-size:13px;
	line-height:1.5;color:var(--text,#ece5d8)}
/* the button is quiet until you want it: visible on hover, and always visible on touch where
   there is no hover to reveal it */
.bgws-share{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;margin-top:0;cursor:pointer;color:var(--muted,#938a7e);
	background:transparent;border:1px solid transparent;border-radius:6px;
	opacity:0;transition:opacity .18s,color .18s,border-color .18s,background .18s}
.bgws-line:hover .bgws-share,.bgws-share:focus-visible{opacity:1}
.bgws-line:hover .bgws-ed,.bgws-line:hover .bgws-del{opacity:1}
.bgws-share:hover{color:var(--accent,#9b2f2c);border-color:var(--line,rgba(147,138,126,.4));background:rgba(155,47,44,.06)}
@media (hover:none){.bgws-share{opacity:.7}}


/* ---- signed-in editing. None of this renders for a reader. ---- */
.bgws-ed,.bgws-del{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;cursor:pointer;color:var(--muted,#938a7e);background:transparent;
	border:1px solid transparent;border-radius:6px;opacity:0;
	transition:opacity .18s,color .18s,border-color .18s,background .18s}
.bgws-ed:focus-visible,.bgws-del:focus-visible{opacity:1}
.bgws-ed:hover{color:var(--accent,#9b2f2c);border-color:var(--line,rgba(147,138,126,.4))}
.bgws-del:hover{color:#c0392b;border-color:rgba(192,57,43,.45);background:rgba(192,57,43,.06)}
.bgws-del[disabled]{opacity:.4;cursor:default}
/* while a line is being edited it stays lit, so it is obvious which one has the cursor */
.bgws-line.editing{background:rgba(155,47,44,.05);border-radius:6px}
.bgws-line.editing .bgws-t{outline:none;box-shadow:inset 0 -1px 0 var(--accent,#9b2f2c)}
.bgws-add{display:flex;gap:10px;align-items:stretch;padding:14px 0 2px}
/* The field and the button are styled by the THEME, not here. The last version set its own
   colours and got dark text on the dark red, because it reached for --text where the site's
   own button uses --ink (which resolves to the page background, so it is light on red in the
   light palette). Anything that looks like a site button must BE the site button. */
.bgws-new{flex:1 1 auto;margin:0 !important}
.bgws-addbtn{flex:0 0 auto;align-self:stretch}

/* ---- use count -------------------------------------------------------------------
   Right of the words, ahead of the buttons. Hidden at zero: a column of noughts tells a
   reader nothing and makes a new page look abandoned. */
.bgws-uses{flex:0 0 auto;align-self:center;min-width:22px;text-align:right;
	font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;
	color:var(--muted,#938a7e);font-variant-numeric:tabular-nums}
.bgws-uses.zero{visibility:hidden}
.bgws-line:hover .bgws-uses.zero{visibility:visible;opacity:.45}

/* ---- who wrote it ----------------------------------------------------------------
   Bill's own additions carry the house red. Member suggestions carry purple, so the page
   never quietly passes somebody else's words off as his. */
.bgws-src-seed .bgws-t{color:var(--text,#ece5d8)}
.bgws-src-bill .bgws-t{color:var(--accent,#9b2f2c)}
.bgws-src-member .bgws-t{color:#7c56a8}

/* ---- waiting on Bill (only ever rendered for Bill) ---- */
.bgws-pending{background:rgba(124,86,168,.08);border-radius:6px;padding-left:8px;padding-right:8px}
.bgws-pending .bgws-t{opacity:.85;font-style:italic}
.bgws-ok,.bgws-no{flex:0 0 auto;align-self:center;font-family:'Inter',system-ui,sans-serif;
	font-size:11px;font-weight:600;border-radius:6px;padding:5px 10px;cursor:pointer;border:1px solid}
.bgws-ok{color:#2f7d4f;border-color:rgba(47,125,79,.45);background:rgba(47,125,79,.08)}
.bgws-no{color:#c0392b;border-color:rgba(192,57,43,.4);background:transparent}
.bgws-ok[disabled],.bgws-no[disabled]{opacity:.5;cursor:default}

/* ---- member suggestion row ---- */
.bgws-member .bgws-new:focus{border-color:#7c56a8}
/* the honeypot must be reachable by a bot and invisible to a person, so it is moved off
   screen rather than display:none, which some bots skip */
.bgws-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
	opacity:0!important;pointer-events:none}
.bgws-note{list-style:none;margin:6px 0 0;font-family:'Inter',system-ui,sans-serif;
	font-size:11px;color:var(--muted,#938a7e)}
.bgws-note.sent{color:#7c56a8;font-weight:600}

/* ---- per-platform caption packs ---------------------------------------------------
   One panel, moved under whichever line is opened. Each network gets the caption built to
   its own rules, because a single hashtag block copied everywhere hurts on most of them. */
/* Always visible, unlike the edit and delete icons. Those are for somebody who already knows
   they exist; this one is the whole point of the row and nobody hovers a line to find out. */
.bgws-tags{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;font:700 14px Inter,system-ui,sans-serif;cursor:pointer;
	color:var(--muted,#938a7e);background:transparent;
	border:1px solid var(--line,rgba(147,138,126,.28));
	border-radius:6px;opacity:.75;transition:opacity .18s,color .18s,border-color .18s,background .18s}
.bgws-line:hover .bgws-tags,.bgws-tags:focus-visible{opacity:1}
.bgws-tags.on{color:var(--bg,#faf7f2);background:var(--accent,#9b2f2c);border-color:var(--accent,#9b2f2c);opacity:1}
.bgws-tags:hover{color:var(--accent,#9b2f2c);border-color:var(--line,rgba(147,138,126,.4))}


@keyframes bgws-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.bgws-pack{list-style:none;margin:6px 0 14px;padding:12px;border-radius:6px;
	animation:bgws-slide .22s ease;
	background:rgba(147,138,126,.09);border:1px solid var(--line,rgba(147,138,126,.28))}
.bgws-pack[hidden]{display:none}
.bgws-pack-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.bgws-pack-tab{font:600 11px Inter,system-ui,sans-serif;color:var(--muted,#938a7e);
	background:transparent;border:1px solid var(--line,rgba(147,138,126,.3));
	border-radius:6px;padding:6px 11px;cursor:pointer;transition:color .16s,background .16s}
.bgws-pack-tab:hover{color:var(--text,#ece5d8)}
.bgws-pack-tab.on{color:var(--bg,#faf7f2);background:var(--accent,#9b2f2c);border-color:var(--accent,#9b2f2c)}
/* the rule for that platform, stated plainly, because the counts are not preferences */
.bgws-pack-note{margin:0 0 9px;font:400 11.5px Inter,system-ui,sans-serif;line-height:1.55;
	color:var(--muted,#938a7e)}
.bgws-pack-txt{width:100%;margin:0 0 9px !important;font:400 12.5px Inter,system-ui,sans-serif;
	line-height:1.55;resize:vertical;min-height:96px}
.bgws-pack-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bgws-pack-link,.bgws-pack-alt,.bgws-pack-x{font:600 11px Inter,system-ui,sans-serif;cursor:pointer;
	color:var(--muted,#938a7e);background:transparent;
	border:1px solid var(--line,rgba(147,138,126,.3));border-radius:6px;padding:8px 12px}
.bgws-pack-link:hover,.bgws-pack-alt:hover,.bgws-pack-x:hover{color:var(--text,#ece5d8)}
.bgws-pack-link[hidden]{display:none}