/**
 * Front-end styles: login button, profile chip and LIFF widgets.
 *
 * Deliberately small and unopinionated -- these elements sit inside whatever
 * theme the site uses, so they inherit type and spacing rather than fighting it.
 */

/*
 * Never let the browser invent a weight this font does not have.
 *
 * A site whose heading font ships 300, 400 and 500 -- which is what Noto Sans
 * TC arrives as here -- and a rule of ours asking for 600 gets synthetic bold:
 * the 500 outlines smeared sideways. On Latin text it passes; on a character
 * like 繼 the strokes close up and the whole word looks dirty against a solid
 * background. Off, the browser picks the nearest weight it really has.
 */
.mofoline-button,
.mofoline-notice,
.moksa-liff,
.moksa-account,
.moksa-account * {
	/*
	 * LINE's green and the monospace stack, named once. There were two names
	 * for the green in this file and a third in the counter page's sheet,
	 * which is how one of them ends up a shade out from the others.
	 */
	--moksa-green: #06c755;
	--moksa-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	font-synthesis-weight: none;
	font-synthesis: none;
}

/*
 * White on #06C755 measures 2.26:1, below the 4.5:1 a contrast checker wants,
 * and it stays that way on purpose. LINE's login button guidelines state that
 * "Only the following colors can be used for the LINE Login button" and list
 * using a non-designated colour as prohibited. The colour is theirs, not a
 * choice of ours to correct.
 */
.mofoline-button {
	/* Colour is the only thing the settings screen can change, and it arrives
	   as a custom property inline. Unset means the default here wins. */
	background: var(--mofoline-button-bg, var(--moksa-green));
	color: var(--mofoline-button-fg, #fff);

	/* Shape and type are the theme's. These were settings once; a shop that
	   used them got one control that matched nothing else on the page. */
	border-radius: 6px;
	font: inherit;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	transition: filter 0.15s ease;
}

.mofoline-button:hover,
.mofoline-button:focus {
	/* Darkening what is there beats hardcoding a second green, which would
	   ignore whatever colour the site actually configured. */
	filter: brightness(0.93);
	color: var(--mofoline-button-fg, #fff);
}

.mofoline-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mofoline-button--small {
	padding: 6px 12px;
	font-size: 0.875em;
}

.mofoline-button--large {
	padding: 14px 26px;
	font-size: 1.125em;
}

/* Outlined rather than filled, over whatever the page's own background is. */
.mofoline-button--friend {
	background: transparent;
	color: var(--mofoline-button-bg, var(--moksa-green));
	border: 2px solid var(--mofoline-button-bg, var(--moksa-green));
}

.mofoline-button--friend:hover,
.mofoline-button--friend:focus {
	filter: none;
	background: rgba(6, 199, 85, 0.1);
	color: var(--mofoline-button-bg, var(--moksa-green));
}

.mofoline-button__logo {
	flex: 0 0 auto;
}

.mofoline-profile {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mofoline-profile__avatar {
	border-radius: 50%;
}

/*
 * An aside. Neutral by default, because most of what goes in one is neutral:
 * the shop's own "you are already signed in" message came out in a caution box
 * with an amber rule down the side, which is a strange thing to tell somebody
 * who has done nothing wrong.
 */
.mofoline-notice {
	padding: 8px 12px;
	border-left: 3px solid rgba(128, 128, 128, 0.28);
	border-left-color: color-mix(in srgb, currentColor 22%, transparent);
}

/*
 * Amber is for the ones that really are a problem -- both of which only an
 * administrator ever sees. The colour is in the edge rather than a fill: a
 * pale amber panel only works if the text on it is dark, and on a dark theme
 * the text is not.
 */
.mofoline-notice--warn,
.moksa-liff__notice {
	padding: 8px 12px;
	border-left: 4px solid #dba617;
	background: rgba(219, 166, 23, 0.08);
}

/* LIFF widgets ----------------------------------------------------------- */

.moksa-liff {
	max-width: 480px;
}

/*
 * Sized here, not by the width/height attributes the script sets: a theme
 * that declares img { width: 100% } overrides attributes, and LINE serves
 * profile pictures at full resolution -- which is how a 64px avatar came out
 * filling the whole LIFF window on a phone.
 */
.moksa-liff img.moksa-liff__avatar {
	display: block;
	width: 72px;
	height: 72px;
	max-width: 72px;
	margin: 0 0 12px;
	border-radius: 50%;
	object-fit: cover;
}

.moksa-liff__greeting {
	font-size: 1.125em;
	font-weight: 600;
}

.moksa-liff__status {
	opacity: 0.7;
}

.moksa-liff__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.moksa-liff__form textarea {
	width: 100%;
}

.moksa-liff__send {
	align-self: flex-start;
	background: var(--mofoline-button-bg, var(--moksa-green));
	color: var(--mofoline-button-fg, #fff);
	border: 0;
	border-radius: 6px;
	padding: 10px 20px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.moksa-liff__send:disabled {
	opacity: 0.6;
	cursor: default;
}

.mofoline-woo-login {
	margin-bottom: 16px;
}

/* A row that wraps, rather than a button shoved sideways with a margin that
   leaves it hanging off the end of the sentence on a phone. */
.mofoline-checkout-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Placement ------------------------------------------------------------- */

/*
 * Where the login button sits, which is the only thing about it worth a
 * setting. Its size, corners and type come from the page it lands on.
 */
.mofoline-button--center {
	display: flex;
	margin-inline: auto;
}

.mofoline-button--full {
	display: flex;
	width: 100%;
}

/*
 * The rule between the button and the form. The word sits on the line rather
 * than beside it, so it reads as one divider at any width.
 */
.mofoline-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	opacity: 0.65;
}

.mofoline-divider::before,
.mofoline-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	/* currentColor, so the rule is whatever the surrounding text is -- there is
	   no grey here that a dark theme would turn into an invisible line. */
	background: currentColor;
	opacity: 0.35;
}

/* The LINE panel on the account page ------------------------------------ */

/*
 * This panel lives inside somebody else's theme, and the theme wins. Nothing
 * here sets a background, a text colour, a font or a size: it borrows all four
 * from the page, and spends its own colours only where a colour carries
 * meaning -- the LINE mark, connected or not, and a warning.
 *
 * It used to paint itself white with #1d2327 text at 14px, which looked like a
 * screenshot of wp-admin dropped into a shop.
 */
.moksa-account {
	/* Edges and muted text as a proportion of whatever colour the theme is
	   already using, with a plain fallback for browsers without color-mix. */
	--moksa-edge: rgba(128, 128, 128, 0.28);
	--moksa-edge: color-mix(in srgb, currentColor 22%, transparent);

	max-width: 560px;
	border: 1px solid var(--moksa-edge);
	border-radius: 10px;
	overflow: hidden;
}

.moksa-account__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--moksa-edge);
}

/* LINE's mark, in LINE's green. The one colour on this panel that is not
   ours to decide. */
.moksa-account__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 24px;
	padding: 0 8px;
	border-radius: 5px;
	background: var(--moksa-green);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.moksa-account__title {
	font-weight: 600;
}

/* Pushed to the right, so the state is the last thing on the row. */
.moksa-account__state {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9em;
}

.moksa-account__state::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/*
 * The dot carries the state; the words stay whatever colour the theme uses. A
 * green that reads well on this theme's near-white measures 4.48:1 against it
 * and disappears on a dark one -- there is no single green that is safe
 * everywhere, and "connected" does not need to be green to say so.
 */
.moksa-account__state--on::before {
	background: var(--moksa-green);
}

.moksa-account__state--off {
	opacity: 0.6;
}

.moksa-account__who {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
}

.moksa-account__avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--moksa-edge);
}

/* No picture on the record: the initial reads better than an empty circle. */
.moksa-account__avatar--blank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--moksa-green);
	color: #fff;
	font-size: 1.4em;
	font-weight: 600;
}

.moksa-account__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.moksa-account__name {
	font-weight: 600;
	word-break: break-word;
}

.moksa-account__since {
	font-size: 0.9em;
	opacity: 0.7;
}

.moksa-account__lead {
	margin: 0;
	padding: 0;
}

.moksa-account__who + .moksa-account__lead,
.moksa-account__head + .moksa-account__lead {
	padding: 18px 18px 0;
}

.moksa-account__facts {
	margin: 0;
	padding: 0 18px 4px;
	list-style: none;
}

/* Only when it follows the lead paragraph; after the avatar row the section
   already has all the space it needs. */
.moksa-account__lead + .moksa-account__facts {
	padding-top: 12px;
}

.moksa-account__fact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding-left: 24px;
	position: relative;
}

.moksa-account__fact::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.moksa-account__fact--yes::before {
	content: "\2713";
}

/*
 * Linked but not a friend means the messages cannot be delivered at all, so it
 * is the one thing here that has to look like a problem. The colour sits in the
 * rule down the side rather than in the sentence, which leaves the sentence as
 * readable as everything around it whatever the theme is.
 */
.moksa-account__fact--no {
	padding: 2px 0 2px 12px;
	border-left: 3px solid #dba617;
}

.moksa-account__fact--no::before {
	content: none;
}

.moksa-account__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 18px 18px;
}

/*
 * Quiet by default and only coloured on approach: undoing a connection or
 * replacing a card should be findable without being the loudest thing on the
 * page. Transparent over the theme's own background, with its own text colour,
 * so it cannot become a black slab on a dark theme the way a bare .button did.
 */
.moksa-account__quiet,
.moksa-account__unlink {
	padding: 7px 14px;
	border: 1px solid var(--moksa-edge);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.8;
	cursor: pointer;
}

.moksa-account__quiet:hover,
.moksa-account__quiet:focus-visible,
.moksa-account__unlink:hover,
.moksa-account__unlink:focus-visible {
	border-color: currentColor;
	opacity: 1;
}

.moksa-account__quiet[disabled],
.moksa-account__unlink[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* The membership card, inside the panel ---------------------------------- */

.moksa-account__section {
	padding: 18px;
	border-top: 1px solid var(--moksa-edge);
}

.moksa-account__section .moksa-account__actions {
	padding: 12px 0 0;
}

.moksa-account__subhead {
	margin: 0 0 6px;
	font-size: 1em;
	font-weight: 600;
}

/*
 * No white bed under the code: the SVG paints its own white ground, so the
 * square is black-on-white whatever the theme does around it.
 *
 * A button rather than a div, so it has to unset what a theme does to buttons.
 */
.moksa-account__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Grows with the panel up to a point: a code held up to somebody else's camera
   is easier to read the bigger it is, and on a phone the panel is narrow. */
.moksa-account__qr svg {
	display: block;
	width: min(100%, 240px);
	height: auto;
	border-radius: 4px;
}

.moksa-account__qr-hint {
	font-size: 0.8em;
	opacity: 0.6;
}

.moksa-account__qr:hover .moksa-account__qr-hint,
.moksa-account__qr:focus-visible .moksa-account__qr-hint {
	opacity: 1;
}

/*
 * The enlarged code. White on white, with the page behind it covered: a
 * scanner wants the quiet zone to keep going past the edge of the code, and a
 * shop's header showing through the backdrop is exactly what stops it working.
 */
/*
 * The dialog sizes to its contents; the code inside sizes to the room left
 * over. Sizing the box first and the code at 100% of it put the close button
 * below the fold of a scrolling dialog on a phone held sideways -- where 92vh
 * is about 330 pixels and the code, the characters and the button do not fit
 * in it together.
 */
.moksa-account__zoom {
	max-width: 92vw;
	max-height: 92vh;
	padding: 20px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	overflow: auto;
}

.moksa-account__zoom::backdrop {
	background: rgba(255, 255, 255, 0.97);
}

/* Whichever is smaller: the width of the screen, or what is left of its
   height once the characters and the button have had theirs. */
.moksa-account__zoom svg {
	display: block;
	width: min(calc(92vw - 40px), calc(92vh - 160px));
	min-width: 150px;
	height: auto;
}

.moksa-account__zoom-code {
	margin: 12px 0 0;
	color: #1d2327;
	font-family: var(--moksa-mono);
	font-size: 15px;
	letter-spacing: 0.14em;
	text-align: center;
}

.moksa-account__zoom-close {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 14px;
	border: 1px solid #d5d7da;
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

.moksa-account__code {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--moksa-edge);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	/* Grouped in fives and spaced out: this string gets read across a counter
	   and typed by someone who is not looking at it. Monospace is not a style
	   choice here -- it is what keeps 0 and O apart. */
	font-family: var(--moksa-mono);
	font-size: 1em;
	letter-spacing: 0.14em;
	text-align: center;
	/* A theme with a large base size can push twenty characters plus their
	   spacing past the panel. Wrapping is ugly; clipping loses the code. */
	overflow-wrap: anywhere;
	cursor: pointer;
}

.moksa-account__code:hover,
.moksa-account__code:focus-visible {
	border-color: currentColor;
}

.moksa-account__code.is-copied {
	border-style: solid;
	border-color: #06863b;
	color: #06863b;
}

.moksa-account__hint {
	margin: 8px 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

/*
 * On a touch screen these become finger targets. Not at every width -- the
 * theme's own controls on this page are 39 and 40 pixels tall, and a 44px
 * button of ours beside them would be the thing that looks out of place. This
 * asks the pointer, not the viewport.
 */
@media (pointer: coarse) {
	.moksa-account__quiet,
	.moksa-account__unlink,
	.moksa-account__code {
		min-height: 44px;
	}
}

@media (max-width: 480px) {
	/*
	 * A long name wraps to two or three lines on a narrow screen, and an
	 * avatar centred against that sits oddly low.
	 *
	 * There used to be a rule here stacking the action buttons full width as
	 * well. It never did anything: this theme sets `width: fit-content` on
	 * every button, which is a definite cross size, and a flex item with one
	 * of those cannot be stretched. The row only ever holds a single button
	 * anyway, so the rule was answering a question nobody asked.
	 */
	.moksa-account__who {
		align-items: flex-start;
	}
}