/*
 * The (i) on the shop's own words: a small round icon and a speech bubble attached to it
 * (`Render\TermInfo::render()`'s markup, brief "term.css"). Enqueued (`Terms\Doors`) only on a
 * page where at least one (i) was actually printed, so no other page pays for it. Colour tokens
 * match `assets/css/help.css`'s (the shop's accent green) even though this file does not load
 * `.ibhelp`'s custom properties — the (i) can sit anywhere in the shop, not only inside a help
 * page.
 */

.ibhelp-term {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
}

/* The BUTTON is a generous, invisible hit area (28×28px) — Matteo, field review, release 0.7.0:
   the previous 18px VISIBLE circle read as "too big" on desktop and on mobile. The visible icon
   is now the 14px `> span` below; the negative margins pull the extra hit-area size back in so a
   28px box never pushes the surrounding text apart the way a visibly bigger control would (the
   line height and word spacing stay exactly what they were with a 14px icon). */
.ibhelp-term__button {
	width: 28px;
	height: 28px;
	margin: -7px -5px -7px -3px;
	padding: 0;
	border: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none; /* the focus ring goes on the visible `> span` icon below, not this hit area. */
}

.ibhelp-term__button > span {
	display: block;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 1px solid rgb( 54, 99, 54 );
	border-radius: 50%;
	color: rgb( 54, 99, 54 );
	font: italic 700 10px/12px Georgia, 'Times New Roman', serif;
	text-align: center;
}

.ibhelp-term__button:hover > span,
.ibhelp-term__button[ aria-expanded="true" ] > span {
	background: rgb( 54, 99, 54 );
	color: #fff;
}

.ibhelp-term__button:focus-visible > span {
	outline: 2px solid rgb( 54, 99, 54 );
	outline-offset: 2px;
}

/* `[hidden]` must really hide, unconditionally — the lesson of 0.3.3 (`assets/css/notes.css`'s
   own history): the bubble opening and closing IS a `[hidden]` toggle, exactly the kind of thing
   a stray `display` rule elsewhere on the shop could silently break. Targets the bubble itself,
   not a `.ibhelp-term […]` descendant selector — `assets/js/term.js` moves the open bubble to
   `document.body` (release 0.6.1: a `position:absolute`/`fixed` bubble left inside a clipping
   accordion group stays clipped no matter what), so by the time it is hidden again it may no
   longer be a descendant of `.ibhelp-term` at all. */
.ibhelp-term__bubble[ hidden ] {
	display: none !important;
}

.ibhelp-term__bubble {
	/* `position: fixed`, placed in VIEWPORT coordinates by `assets/js/term.js` (`top`/`left` set
	   as inline styles right before it is revealed) — not `absolute`: the icon so often sits
	   inside a container that clips its overflow (an accordion, a table cell) that an ancestor-
	   relative position can never be trusted to stay visible. No default `top`/`left` here on
	   purpose: it would flash in the corner (`top: 0; left: 0`) for the one frame before the
	   script measures and places it, which `visibility: hidden` below also guards against. */
	position: fixed;
	visibility: hidden;
	z-index: 1000;
	width: min( 320px, calc( 100vw - 32px ) );
	padding: 14px 16px;
	background: #fff;
	border: 1px solid rgba( 128, 128, 128, .4 );
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, .18 );

	/* Reset: the (i) lives inside bold labels and uppercase buttons — the bubble must read as its
	   own plain block of text regardless of what it is printed next to. */
	font-weight: 400;
	font-size: 15px;
	font-style: normal;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	color: rgb( 64, 64, 64 );
}

/* Below 480px (brief "term.js"/"term.css") the bubble is the SAME speech bubble as desktop, just
   narrower — Matteo, field review, release 0.7.0: the old phone "sheet" fixed to the bottom edge
   left the bubble "far away" from the icon. There is no separate phone mode any more: only the
   width and (`assets/js/term.js`) the horizontal gutter change below this breakpoint. */
@media ( max-width: 479px ) {
	.ibhelp-term__bubble {
		width: min( 320px, calc( 100vw - 24px ) );
	}
}

/* The speech-bubble arrow: a 10px square, rotated 45°, the same white background as the bubble,
   with the bubble's own 1px border reproduced on only the two OUTER sides — the two sides that
   face away from the bubble's body — so it reads as one shape with the bubble rather than a
   diamond stuck to its edge (the other two sides have no border at all; that half of the square
   sits inside the bubble's own padding box and is indistinguishable from its background).
   `assets/js/term.js` sets `--ibhelp-arrow-x` — the icon's centre, relative to the bubble's own
   left edge, clamped 16px in from either side so the arrow never sits on the rounded corner —
   before revealing the bubble. Default: below the icon, the arrow sits on the bubble's TOP edge
   and points up (`border-top` + `border-left`). `.ibhelp-term__bubble--above` (the bubble flipped
   above the icon, not enough room below): the arrow moves to the BOTTOM edge and points down
   (`border-bottom` + `border-right`) instead. */
.ibhelp-term__bubble::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	left: calc( var( --ibhelp-arrow-x, 50% ) - 5px );
	background: #fff;
	transform: rotate( 45deg );
}

.ibhelp-term__bubble:not( .ibhelp-term__bubble--above )::before {
	top: -3px;
	border-top: 1px solid rgba( 128, 128, 128, .4 );
	border-left: 1px solid rgba( 128, 128, 128, .4 );
}

.ibhelp-term__bubble--above::before {
	bottom: -3px;
	border-bottom: 1px solid rgba( 128, 128, 128, .4 );
	border-right: 1px solid rgba( 128, 128, 128, .4 );
}

.ibhelp-term__more {
	display: block;
	margin-top: 8px;
	color: rgb( 54, 99, 54 );
}