/*!
 * MathQuill Floating Keyboard - styles
 * Part of the "MathQuill Floating Keyboard (QSM)" plugin.
 *
 * The reset at the top is deliberate: MasterStudy and most WordPress themes style bare
 * <button> globally with their own padding and min-width, which previously pushed the tab
 * strip past the panel edge. Every property is re-declared explicitly below.
 */

/*
 * Scoped reset. MasterStudy and most WP themes style bare <button> globally with
 * their own padding, min-width, font-size and text-transform. Without neutralising
 * that first, the tab strip inherits theme padding and overflows the panel.
 * Everything below is re-declared explicitly rather than relying on defaults.
 */
.fmk-panel, .fmk-panel *, .fmk-panel *::before, .fmk-panel *::after,
.fmk-fab, .fmk-fab *, .fmk-wrapper, .fmk-wrapper * { box-sizing:border-box; }

.fmk-panel button, .fmk-fab {
	margin:0 !important; padding:0 !important; min-width:0 !important;
	min-height:0 !important; max-width:none !important; width:auto;
	border:0; background:none; font:inherit; line-height:1;
	text-transform:none !important; letter-spacing:normal;
	text-shadow:none; box-shadow:none; border-radius:0;
	-webkit-appearance:none; appearance:none; cursor:pointer;
	text-decoration:none; float:none; position:relative;
}
.fmk-panel button::after, .fmk-panel button::before { content:none; }

.fmk-panel, .fmk-fab, .fmk-wrapper {
	--n-900:#001233; --n-800:#002060; --n-700:#0a3078; --n-600:#164196;
	--n-200:#c3d2ef; --n-100:#e8eefb; --n-50:#f4f7fd;
	--t-800:#00566b; --t-700:#00728c; --t-600:#0096B7; --t-500:#22aecd;
	--t-300:#7fd2e4; --t-200:#b8e6f1; --t-100:#d9f1f7; --t-50:#eefafd;
	--rose:#be123c;
	--sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
	--math:'Latin Modern Math','STIX Two Math','Cambria Math','Times New Roman',serif;
	font-family:var(--sans);
	-webkit-font-smoothing:antialiased;
}

.fmk-wrapper {
	display:inline-block; position:relative; min-width:210px; max-width:100%;
	padding:3px; border:1px solid var(--n-200); border-radius:8px;
	background:#fff; transition:border-color .18s ease, box-shadow .18s ease;
}
.fmk-wrapper.fmk-active { border-color:var(--t-600); box-shadow:0 0 0 3px rgba(0,150,183,.16); }
.fmk-wrapper .fmk-input {
	display:block; min-width:170px; padding:7px 10px; font-size:15px;
	color:var(--n-900); background:var(--n-50);
	border:1px solid var(--n-100); border-radius:6px; line-height:1.4;
}

@keyframes fmk-rise { from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:none} }
@keyframes fmk-pop  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@keyframes fmk-ripple { to{transform:scale(2.6);opacity:0} }
@keyframes fmk-glow { 0%,100%{box-shadow:0 5px 16px rgba(0,32,96,.3)} 50%{box-shadow:0 5px 22px rgba(0,150,183,.46)} }

.fmk-fab {
	position:fixed; right:18px; bottom:18px; height:42px;
	padding:0 16px 0 13px !important; border-radius:22px; z-index:99998; display:none;
	align-items:center; gap:8px; color:#fff;
	font-family:var(--sans); font-size:12.5px; font-weight:500;
	background:linear-gradient(125deg,var(--n-800) 0%,var(--n-600) 45%,var(--t-600) 130%);
	animation:fmk-glow 3.4s ease-in-out infinite;
	transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
.fmk-fab.fmk-visible{display:inline-flex}
.fmk-fab:hover{transform:translateY(-2px) scale(1.02)}
.fmk-fab .fmk-fab-ic {
	width:23px;height:23px;border-radius:7px;display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.16); font-family:var(--math); font-style:italic; font-size:14px;
}

.fmk-panel {
	position:fixed; right:18px; bottom:18px; width:368px; max-width:calc(100vw - 14px);
	border-radius:14px; z-index:99999; display:none; overflow:hidden;
	background:linear-gradient(180deg,#ffffff 0%,#fbfdfe 42%,#f2f9fc 100%);
	border:1px solid var(--n-200);
	box-shadow:0 2px 4px rgba(0,18,51,.05), 0 16px 38px rgba(0,18,51,.19);
	user-select:none; font-size:13px;
}
.fmk-panel.fmk-visible{display:block; animation:fmk-rise .24s cubic-bezier(.22,1,.36,1)}

.fmk-panel .fmk-head {
	display:flex; align-items:center; gap:7px; height:40px;
	padding:0 7px 0 11px; cursor:move; position:relative;
	background:linear-gradient(118deg,var(--n-800) 0%,var(--n-700) 48%,var(--t-700) 128%);
}
.fmk-panel .fmk-head::after{
	content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
	background:linear-gradient(90deg,var(--t-600),var(--t-300),var(--n-600));
}
.fmk-panel .fmk-grip{color:rgba(255,255,255,.4); font-size:8px; letter-spacing:1.4px; line-height:1; flex:0 0 auto}
.fmk-panel .fmk-htxt{flex:1 1 auto; min-width:0; line-height:1.2; overflow:hidden}
.fmk-panel .fmk-eyebrow{display:block;font-size:8px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--t-300)}
.fmk-panel .fmk-title{display:block;font-size:11.5px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fmk-panel button.fmk-hbtn{
	height:24px; padding:0 7px !important; flex:0 0 auto;
	border:1px solid rgba(255,255,255,.2); border-radius:6px;
	background:rgba(255,255,255,.1); color:#fff;
	font-family:var(--sans); font-size:11px; font-weight:500; line-height:1;
	display:flex; align-items:center; justify-content:center; gap:4px;
	transition:background .15s ease, transform .1s ease;
}
.fmk-panel button.fmk-hbtn:hover{background:rgba(255,255,255,.22)}
.fmk-panel button.fmk-hbtn:active{transform:scale(.93)}
.fmk-panel button.fmk-hbtn.fmk-on{background:var(--t-600);border-color:var(--t-500)}
.fmk-panel button.fmk-hbtn.fmk-icon{padding:0 6px !important;font-size:13px}

.fmk-panel .fmk-sug{
	margin:8px 9px 0; padding:7px 8px 8px; border-radius:9px;
	background:linear-gradient(135deg,var(--t-50) 0%,var(--n-50) 100%);
	border:1px solid var(--t-200);
}
.fmk-panel .fmk-sug-head{
	display:flex;align-items:center;gap:5px;margin:0 0 6px;
	font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t-700);
}
.fmk-panel .fmk-sug-head::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--t-600);flex:0 0 auto}
.fmk-panel .fmk-sug-head::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--t-200),transparent)}
.fmk-panel .fmk-sug .fmk-key{animation:fmk-pop .28s ease backwards}

.fmk-panel .fmk-tabs{
	position:relative; display:flex; gap:0; margin:8px 9px 0; padding:2px;
	background:var(--n-50); border:1px solid var(--n-100); border-radius:8px;
	overflow:hidden;
}
.fmk-panel .fmk-ind{
	position:absolute; top:2px; bottom:2px; left:2px; width:0; border-radius:6px; z-index:0;
	background:linear-gradient(135deg,var(--n-800),var(--t-700));
	box-shadow:0 2px 5px rgba(0,32,96,.26);
	transition:left .26s cubic-bezier(.22,1,.36,1), width .26s cubic-bezier(.22,1,.36,1);
}
.fmk-panel button.fmk-tab{
	position:relative; z-index:1; flex:1 1 0; min-width:0 !important;
	height:24px; padding:0 2px !important; border-radius:6px; background:transparent;
	font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.01em;
	color:var(--n-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	display:flex; align-items:center; justify-content:center;
	transition:color .22s ease;
}
.fmk-panel button.fmk-tab.fmk-on{color:#fff}

.fmk-panel .fmk-body{padding:0 9px}
.fmk-panel .fmk-glabel{
	display:flex;align-items:center;gap:6px;margin:8px 0 4px;
	font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n-600);
}
.fmk-panel .fmk-glabel::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--n-100),transparent)}

.fmk-panel .fmk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}

.fmk-panel button.fmk-key{
	overflow:hidden; height:35px; padding:0 1px !important;
	border:1px solid var(--n-100); border-radius:7px; background:#fff; color:var(--n-900);
	font-family:var(--math); font-size:14px; font-weight:400;
	display:flex; align-items:center; justify-content:center; line-height:1;
	transition:transform .09s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.fmk-panel button.fmk-key:hover{transform:translateY(-1.5px);box-shadow:0 3px 8px rgba(0,32,96,.11);border-color:var(--n-200)}
.fmk-panel button.fmk-key:active{transform:translateY(0) scale(.95)}
.fmk-panel button.fmk-key:focus-visible{outline:2px solid var(--t-600);outline-offset:1px}
.fmk-panel .fmk-key var{font-family:var(--math);font-style:italic}
.fmk-panel .fmk-key sup{font-size:8px;vertical-align:super;line-height:0}
.fmk-panel .fmk-key sub{font-size:8px;vertical-align:sub;line-height:0}

.fmk-panel button.fmk-key.k-fn{font-family:var(--sans);font-size:11.5px;font-weight:600;background:var(--n-50);color:var(--n-800)}
.fmk-panel button.fmk-key.k-fn:hover{background:var(--n-100)}
.fmk-panel button.fmk-key.k-struct{background:linear-gradient(160deg,#fff,var(--t-50));color:var(--t-800);border-color:var(--t-100)}
.fmk-panel button.fmk-key.k-struct:hover{background:var(--t-50);border-color:var(--t-200)}
.fmk-panel button.fmk-key.k-op{background:var(--t-50);color:var(--t-700);border-color:var(--t-100);font-weight:500}
.fmk-panel button.fmk-key.k-op:hover{background:var(--t-100)}
.fmk-panel button.fmk-key.k-sym{background:#fff;color:var(--n-700)}
.fmk-panel button.fmk-key.k-num{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--n-800);background:#fff}
.fmk-panel button.fmk-key.k-num:hover{background:var(--n-50)}
.fmk-panel button.fmk-key.k-eq{background:linear-gradient(135deg,var(--n-800),var(--t-700));color:#fff;border-color:transparent;font-weight:600}
.fmk-panel button.fmk-key.k-eq:hover{filter:brightness(1.12)}

.fmk-panel .fmk-sug button.fmk-key{background:#fff;border-color:var(--t-200);color:var(--t-700);font-weight:500}
.fmk-panel .fmk-sug button.fmk-key:hover{border-color:var(--t-600);box-shadow:0 3px 8px rgba(0,150,183,.2)}

.fmk-panel .fmk-rip{position:absolute;border-radius:50%;background:currentColor;opacity:.2;pointer-events:none;
	width:30px;height:30px;margin:-15px 0 0 -15px;transform:scale(0);animation:fmk-ripple .48s ease-out forwards}

.fmk-panel .fmk-pad{
	margin:8px 0 0; padding:8px 9px 10px;
	background:linear-gradient(180deg,rgba(0,32,96,.035),rgba(0,150,183,.05));
	border-top:1px solid var(--n-100);
}
.fmk-panel .fmk-pad.fmk-hidden{display:none}

.fmk-open-mobile-pad{padding-bottom:400px !important}

@media (max-width:768px){
	.fmk-panel{right:0;left:0;bottom:0;width:100%;max-width:100%;border-radius:14px 14px 0 0;border-bottom:none}
	.fmk-panel .fmk-head{cursor:default}
	.fmk-panel button.fmk-key{height:38px}
	.fmk-fab{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
	.fmk-panel.fmk-visible,.fmk-panel .fmk-sug .fmk-key,.fmk-fab{animation:none}
	.fmk-panel button.fmk-key,.fmk-panel .fmk-ind,.fmk-panel button.fmk-tab{transition:none}
}
